Flutter 移除 GridView 行之间的空白

Question

我正在尝试创建一个raised button的网格视图，但是网格行之间有大量的空白，就像这张图片一样：

我正在使用页面底部的代码实现GridView：

如您所见，我设置了：

SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4), 

我本来以为设置主轴间距和交叉轴间距应该会去除这些空白。我还尝试将网格视图返回到一个大小框中，并将其更改为SliverGridWithFixedCount，但似乎没有任何变化。我不确定在布局方面做错了什么？谢谢你的帮助。

body: Column(
        children: <Widget>[
          Flexible(
            child: filtersGridView(),
          ),
        ],
      ),
    );
  }
}


class filtersGridView extends StatefulWidget {
  @override
  _filtersGridViewState createState() => _filtersGridViewState();
}

class _filtersGridViewState extends State<filtersGridView> {

  final List <DocumentSnapshot> documents;
  _filtersGridViewState({this.documents});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: Firestore.instance.collection('categories').snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return Center(child: const Text('Loading events...'));
        }
        return GridView.builder(
          gridDelegate:
          SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4),
          itemBuilder: (BuildContext context, int index) {
            return Column(children: <Widget>[
              InkWell(
                onTap: () {

                },
                child: SizedBox(
                  height: 30,
                  child: RaisedButton(
                    color: Colors.white,
                    child: Row(
                      children: <Widget>[
                        Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.center, style: TextStyle(fontSize:  15, color: Colors.black,),),
                         ],
                    ),

- Nicholas Muir

---

谢谢，但是文本不是问题。我理解图片中的文本溢出了，但这不是我的问题。我只是将文本大小设置为2，行之间的空格仍然存在。 - Nicholas Muir

抱歉，好的，为什么你在使用 maxCrossAxisExtent: 150？ - satish

我只是在调整设置，正如我在问题中所说，我也尝试使用固定列数，但这也没有改变它。 - Nicholas Muir

实际上，您想要完成的任务可以更轻松地使用“Wrap”小部件来完成。Wrap小部件类似于Row或Column小部件，但它具有一个额外的优势，即可以根据屏幕上可用的空间调整其子项。您考虑过这个解决方案吗？示例：https://flutter-widget.live/widgets/Wrap - Despotovic

Answer 1

如果您关心按钮内部的填充 - 这是由于材料按钮的最小宽度设置为88所导致的。

此外，根据我的经验，我注意到材料按钮周围有一些奇怪的边距。我使用materialTapTargetSize: MaterialTapTargetSize.shrinkWrap来解决这个问题。

ButtonTheme(
  minWidth: 0,
  height: 30,
  child: RaisedButton(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    // ...
  )
)

如果您希望按钮在高度上填满整个maxCrossAxisExtent - 使用具有自定义约束的RawMaterialButton。

---

已更新

我认为问题出在按钮中，但我突然想到实际上是关于GridView Delegate的问题。

根据Flutter文档，SliverGridDelegateWithMaxCrossAxisExtent如何工作：

此代理创建具有相同大小和间距的网格块。

代理的childAspectRatio属性的默认值为1.0，即正方形。您可以获得一个完全合理的布局显示 - 1:1块的网格。

要解决这个问题，您需要想出合适的childAspectRatio值。

一些伪代码：cellHeight = cellWidth / childAspectRatio。

例如：childAspectRatio: 2将显示以下大小的单元格：

        2
-----------------
|               |
|               | 1
|               |
-----------------

请告诉我这是否有帮助。

- George Zvonov

---

谢谢。我已经移除了按钮，但问题仍然存在，所以不是按钮的问题。 - Nicholas Muir

嗨，George，谢谢，我也刚刚解决了。我像这样改变了纵横比：SliverGridDelegateWithFixedCrossAxisCount(childAspectRatio: 3, crossAxisCount: 3,)。 - Nicholas Muir

Answer 2

尝试一下，希望它能正常工作，

GridView.builder(
        itemCount: 6,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,),
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              child: Flex(
                direction: Axis.vertical,
                children: <Widget>[
                  Expanded(flex: 5, child: InkWell(
                    onTap: (){},
                  )),
                  Expanded(
                      flex: 5,
                      child: RaisedButton(
                        onPressed: () {},
                        child: Text('Bt'),
                      ))
                ],
              ),
            ),
          );
        },
      ),

- satish

Answer 3

将 childAspectRatio 的值增加到 2，

                      primary: false,
                      scrollDirection: Axis.vertical,
                      // padding: const EdgeInsets.all(10),
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 10,
                      maxCrossAxisExtent: 180.0,
                      shrinkWrap: true,
                      childAspectRatio: 2,
                      children: <Widget>[
                        container(),
                        container(),
                        container(),
                      ])

- lvingstone