已更新

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

尝试这个希望，这样就可以了，

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'),
                      ))
                ],
              ),
            ),
          );
        },
      ),

Answer 2

如果您担心按钮内部的填充-发生这种情况是由于将材质按钮的最小宽度设置设置为88。

此外，根据我的经验，我发现实质性按钮周围有一些怪异的边缘。我用materialTapTargetSize: MaterialTapTargetSize.shrinkWrap解决了这个问题。

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

如果您希望按钮填充整个maxCrossAxisExtent的高度，请使用RawMaterialButton并分配自定义约束。

已更新

我认为问题出在按钮之内，但我发现实际上是关于GridView委托的。

SliverGridDelegateWithMaxCrossAxisExtent按照Flutter文档的工作方式：

This delegate creates grids with equally sized and spaced tiles.

委托的childAspectRatio属性的默认值为1.0，即-正方形。您将获得完美的逻辑布局显示-1：1块的网格。

要解决此问题，您需要提供正确的childAspectRatio值。

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

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

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

请告诉我这是否有帮助。

Flutter删除GridView行之间的空间

2 个答案:

已更新