时间戳

首页 > 解决方案 > Flutter GridView.count 元素之间不需要的填充/空间

flutter - Flutter GridView.count 元素之间不需要的填充/空间

问题描述

我有一个 GridView.builder 来生成 2 个“列”元素

这是我的代码：

ListView(
 children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: screenWidth * 0.05),
              child: Text(
                "MyText",
                style: TextStyle(color: Colors.white, fontSize: 22),
              ),
            ),
            GridView.builder(
              padding: EdgeInsets.only(
                  left: screenWidth * 0.05, right: screenWidth * 0.05),
              shrinkWrap: true,
              primary: false,
              itemCount: 12,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemBuilder: (context, index) {
                return Center(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      height: screenWidth / 4.1 + screenWidth / 11,
                      child: Column(
                        children: <Widget>[
                          Container(
                            height: screenWidth / 4.1,
                            width: screenWidth / 2.5,
                            color: Colors.white,
                          ),
                          Container(
                            height: screenWidth / 11,
                            width: screenWidth / 2.5,
                            color: Colors.blue,
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
  ],
        ),

GridView.count_padding

正如您在图像中看到的那样，标题“MyText”和 GridView 的元素没有垂直对齐。（即使它们具有相同的填充）。

是否有可能使它们具有相同的对齐方式？

谢谢！

标签： flutterdart

解决方案

可能有更好的方法来解决这个问题，但这可能需要重新设计小部件的布局方式。我为你制定了一个快速解决方案。下面的代码

ListView(
 children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: screenWidth * 0.05),
              child: Text(
                "MyText",
                style: TextStyle(color: Colors.white, fontSize: 22),
              ),
            ),
            GridView.builder(
              shrinkWrap: true,
              primary: false,
              itemCount: 12,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemBuilder: (context, index) {
                return Center(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      height: screenWidth / 4.1 + screenWidth / 11,
                      child: Column(
                        children: <Widget>[
                          Container(
                            height: screenWidth / 4.1,
                            width: screenWidth / 2.5,
                            color: Colors.white,
                          ),
                          Container(
                            height: screenWidth / 11,
                            width: screenWidth / 2.5,
                            color: Colors.blue,
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
  ],
        ),

您可以使用 'Flutter Inspector' - 'Show Debug Paint' 查看布局

推荐阅读