Flutter 删除 GridView 行之间的空间

Question

我正在尝试创建一个凸起按钮的 GridView ，但在网格的行之间有大量空间，如下图所示:

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

如你所见，我设置了:

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

我原以为设置主轴间距和交叉轴间距应该会删除这些空间。

我还尝试将 gridview 返回到一个大小合适的框中并将其更改为 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,),),
                         ],
                    ),

Answer 1

如果您担心按钮内部的填充 - 这是因为 Material 按钮的最小宽度设置被设置为 88。

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

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

如果您希望按钮在高度上填充整个 maxCrossAxisExtent - 使用 RawMaterialButton分配了自定义约束。

---

已更新

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

如何 SliverGridDelegateWithMaxCrossAxisExtent按照 Flutter 文档工作:

此委托(delegate)创建具有相同大小和间隔的图 block 的网格。

委托(delegate)的 childAspectRatio 属性的默认值为 1.0，即 - 一个正方形。您将获得一个完美的逻辑布局显示 - 1:1 block 的网格。

要解决这个问题，您需要提出正确的 childAspectRatio 值。

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

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

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

如果这有帮助，请告诉我。