我有一个GridView构建器,它可以呈现容器小部件的列表。但是,容器小部件的框阴影将被切断,如下面的屏幕截图所示。
的数据
GridLayOut类
import 'package:flutter/material.dart';
import 'package:project/utils/constants/sizes.dart';
class GridLayout extends StatelessWidget {
const GridLayout({
Key? key,
required this.itemCount,
required this.itemBuilder,
this.mainAxisExtent = 190,
}) : super(key: key);
final int itemCount;
final Widget? Function(BuildContext, int) itemBuilder;
final double? mainAxisExtent;
@override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: itemCount,
shrinkWrap: true,
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
clipBehavior: Clip.none,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: mainAxisExtent,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
),
itemBuilder: itemBuilder,
);
}
}
}
字符串
GridItem类
import 'package:flutter/material.dart';
import 'package:project/utils/constants/colors.dart';
import 'package:project/utils/constants/sizes.dart';
class GridItem extends StatefulWidget {
const GridItem({
Key? key,
required this.name,
this.child,
this.imagePath,
this.hasSwitch = false,
}) : super(key: key);
final String name;
final Widget? child;
final String? imagePath;
final bool hasSwitch;
@override
State<GridItem> createState() {
return _GridItemState();
}
}
class _GridItemState extends State<GridItem> {
bool isSwitched = false;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: isSwitched ? Color(0xFF535353) : Color(0xFFF5F6FA),
boxShadow: isSwitched
? [
BoxShadow(
color: Colors.black.withOpacity(0.3),
offset: const Offset(4.0, 4.0),
blurRadius: 5.0,
spreadRadius: 2.0,
),
]
: [],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
widget.imagePath != null
? Container(
width: 50,
height: 50,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFE0E0E0),
),
child: Center(
child: Image.asset(
widget.imagePath!,
height: 40,
// color: isSwitched ? Color(0xFFFFFFFF) : null,
fit: BoxFit.cover,
),
),
)
: const SizedBox(),
const SizedBox(height: 8),
Text(
widget.name,
style: Theme.of(context)
.textTheme
.titleLarge!
.apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
),
const Spacer(),
widget.hasSwitch
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
isSwitched ? "On" : "Off",
style: Theme.of(context)
.textTheme
.titleLarge!
.apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
),
Switch(
value: isSwitched,
onChanged: (value) {
setState(() {
isSwitched = value;
});
},
)
],
)
: const SizedBox(),
],
),
);
}
}
型
更新:如果我在GridView.builder中添加padding,它会打乱我的布局,如图所示。
的
2条答案
按热度按时间l2osamch1#
处理这种情况的简单方法是用Padding小部件 Package
GridView
。字符串
ztigrdn82#
仅将右侧填充
padding: const EdgeInsets.only(right: 16.0)
添加到GridView
小部件,即字符串