flutter - Gridview 在 flutter 中在父容器顶部间隔额外区域

标签 flutter dart flutter-layout

我正在创建一个洗牌游戏,为此,我设置了 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')),
              ],
            ),
          )
        ],
      ),
    );
  }
}

也放置了输出图像... enter image description here

最佳答案

enter image description here

您可以在 Flutter 检查器中看到,默认情况下 GridView 具有内边距 (0, 24, 0, 0)。您可以通过在“GridView”中添加 EdgeInsets.zero 来删除它。

GridView.builder(
  padding: EdgeInsets.zero,
  ...
)

关于flutter - Gridview 在 flutter 中在父容器顶部间隔额外区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74452368/

相关文章:

flutter - 如何修复隐藏其子项的 Aspectratio 小部件?

android - 如何在Flutter中将.dart文件的变量获取到另一个.dart文件

android - Flutter 中的 rxdart 用法未被识别

Flutter PageView 在 null 上调用了 jumpToPage 方法

xml - XmlBuilder.processing 可以接受更多参数吗?

json - 如何在Flutter ListView构建期间测试json属性是否存在

flutter - Boxshadow 出现在其他小部件后面

flutter - 以编程方式滚动到 ListView 的末尾

flutter - ImagePicker,如何再次设置图像?

google-maps - Flutter 风格的 map