我正在创建一个洗牌游戏,为此,我设置了 3 个网格级别,
我采用了 300x300 的固定大小容器,并且不想更改其大小,
在这里,我想将所有网格按钮正确放置在网格内,但我在 GridView 顶部获得了空间,因此,按钮没有显示正确适合。
这是我的代码
final kdecoration = BoxDecoration(
border: Border.all(color: Colors.yellow, width: 1),
borderRadius: BorderRadius.circular(5),
color: Colors.red);
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
double w = 300;
double h = 300;
int gridvalue = 3;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Text(
'$gridvalue x $gridvalue',
style: TextStyle(fontSize: 30, color: Colors.blue),
)),
SizedBox(
height: 20,
),
Container(
color: Colors.blue,
height: h,
width: w,
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: gridvalue * gridvalue,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 0,
crossAxisSpacing: 0,
crossAxisCount: gridvalue,
),
itemBuilder: (context, index) {
return Container(
decoration: kdecoration,
child: Center(
child: Text(
(index + 1).toString(),
style: TextStyle(fontSize: 20, color: Colors.white),
)),
//color: Colors.green,
);
})),
SizedBox(
height: 20,
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
setState(() {
gridvalue = 3;
});
},
child: Text('3x3')),
ElevatedButton(
onPressed: () {
setState(() {
gridvalue = 4;
});
},
child: Text('4x4')),
ElevatedButton(
onPressed: () {
setState(() {
gridvalue = 5;
});
},
child: Text('5x5')),
],
),
)
],
),
);
}
}
最佳答案
您可以在 Flutter 检查器中看到,默认情况下 GridView
具有内边距 (0, 24, 0, 0)。您可以通过在“GridView”中添加 EdgeInsets.zero
来删除它。
GridView.builder(
padding: EdgeInsets.zero,
...
)
关于flutter - Gridview 在 flutter 中在父容器顶部间隔额外区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74452368/