dart 防止框影被截断

2nc8po8w  于 2024-01-03  发布在  其他
关注(0)|答案(2)|浏览(138)

我有一个GridView构建器,它可以呈现容器小部件的列表。但是,容器小部件的框阴影将被切断,如下面的屏幕截图所示。


的数据
GridLayOut类

  1. import 'package:flutter/material.dart';
  2. import 'package:project/utils/constants/sizes.dart';
  3. class GridLayout extends StatelessWidget {
  4. const GridLayout({
  5. Key? key,
  6. required this.itemCount,
  7. required this.itemBuilder,
  8. this.mainAxisExtent = 190,
  9. }) : super(key: key);
  10. final int itemCount;
  11. final Widget? Function(BuildContext, int) itemBuilder;
  12. final double? mainAxisExtent;
  13. @override
  14. Widget build(BuildContext context) {
  15. return GridView.builder(
  16. itemCount: itemCount,
  17. shrinkWrap: true,
  18. padding: EdgeInsets.zero,
  19. physics: const NeverScrollableScrollPhysics(),
  20. clipBehavior: Clip.none,
  21. gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  22. crossAxisCount: 2,
  23. mainAxisExtent: mainAxisExtent,
  24. mainAxisSpacing: 16,
  25. crossAxisSpacing: 16,
  26. ),
  27. itemBuilder: itemBuilder,
  28. );
  29. }
  30. }
  31. }

字符串
GridItem类

  1. import 'package:flutter/material.dart';
  2. import 'package:project/utils/constants/colors.dart';
  3. import 'package:project/utils/constants/sizes.dart';
  4. class GridItem extends StatefulWidget {
  5. const GridItem({
  6. Key? key,
  7. required this.name,
  8. this.child,
  9. this.imagePath,
  10. this.hasSwitch = false,
  11. }) : super(key: key);
  12. final String name;
  13. final Widget? child;
  14. final String? imagePath;
  15. final bool hasSwitch;
  16. @override
  17. State<GridItem> createState() {
  18. return _GridItemState();
  19. }
  20. }
  21. class _GridItemState extends State<GridItem> {
  22. bool isSwitched = false;
  23. @override
  24. Widget build(BuildContext context) {
  25. return Container(
  26. padding: const EdgeInsets.all(15),
  27. decoration: BoxDecoration(
  28. borderRadius: BorderRadius.circular(20),
  29. color: isSwitched ? Color(0xFF535353) : Color(0xFFF5F6FA),
  30. boxShadow: isSwitched
  31. ? [
  32. BoxShadow(
  33. color: Colors.black.withOpacity(0.3),
  34. offset: const Offset(4.0, 4.0),
  35. blurRadius: 5.0,
  36. spreadRadius: 2.0,
  37. ),
  38. ]
  39. : [],
  40. ),
  41. child: Column(
  42. crossAxisAlignment: CrossAxisAlignment.start,
  43. children: [
  44. widget.imagePath != null
  45. ? Container(
  46. width: 50,
  47. height: 50,
  48. decoration: const BoxDecoration(
  49. shape: BoxShape.circle,
  50. color: Color(0xFFE0E0E0),
  51. ),
  52. child: Center(
  53. child: Image.asset(
  54. widget.imagePath!,
  55. height: 40,
  56. // color: isSwitched ? Color(0xFFFFFFFF) : null,
  57. fit: BoxFit.cover,
  58. ),
  59. ),
  60. )
  61. : const SizedBox(),
  62. const SizedBox(height: 8),
  63. Text(
  64. widget.name,
  65. style: Theme.of(context)
  66. .textTheme
  67. .titleLarge!
  68. .apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
  69. ),
  70. const Spacer(),
  71. widget.hasSwitch
  72. ? Row(
  73. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  74. children: [
  75. Text(
  76. isSwitched ? "On" : "Off",
  77. style: Theme.of(context)
  78. .textTheme
  79. .titleLarge!
  80. .apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
  81. ),
  82. Switch(
  83. value: isSwitched,
  84. onChanged: (value) {
  85. setState(() {
  86. isSwitched = value;
  87. });
  88. },
  89. )
  90. ],
  91. )
  92. : const SizedBox(),
  93. ],
  94. ),
  95. );
  96. }
  97. }


更新:如果我在GridView.builder中添加padding,它会打乱我的布局,如图所示。


l2osamch

l2osamch1#

处理这种情况的简单方法是用Padding小部件 Package GridView

  1. Widget build(BuildContext context) {
  2. return Padding(
  3. padding: const EdgeInsets.symmetric(horizontal: 16),
  4. child: GridView.builder(

字符串

ztigrdn8

ztigrdn82#

仅将右侧填充padding: const EdgeInsets.only(right: 16.0)添加到GridView小部件,即

  1. GridView.builder(
  2. itemCount: itemCount,
  3. shrinkWrap: true,
  4. const EdgeInsets.only(right: 16.0),
  5. physics: const NeverScrollableScrollPhysics(),
  6. clipBehavior: Clip.none,
  7. gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  8. crossAxisCount: 2,
  9. mainAxisExtent: mainAxisExtent,
  10. mainAxisSpacing: 16,
  11. crossAxisSpacing: 16,
  12. ),
  13. itemBuilder: itemBuilder,
  14. );

字符串

展开查看全部

相关问题