flutter - 使 GridVew 项目填充 FLutter 中的空白空间

Question

我想制作一个自动填充容器的网格项。

我想要的是这样的。我用childAspectRatio这个，但如果我减少项目编号，它就无法填满容器。

这是我的网格代码

Column (
      children: <Widget>[
        Row(
          children: [
            Expanded(
              child: Container(
                 color: Colors.grey,
                  height: 150,
                  child: _gridView ()),
            ),
          ],
        ),
  )

  Widget _gridView () {
    return GridView.count(
        crossAxisCount: 2,
        scrollDirection: Axis.horizontal,
        mainAxisSpacing: 5,
        crossAxisSpacing: 3,
        children: List.generate(6, (index) {
          return Container(
              alignment: Alignment.center,
              child: SizedBox(
                  child: FloatingActionButton(
                    backgroundColor: Colors.green,
                    child: null,
                    onPressed: () {
                      print("Cliked");
                    },)
              ));
        })
    );
  }

一些参考资料说我应该使用Expanded，但我仍然不知道该放在哪里。

标签： flutterdartflutter-layout

Answer 1

检查我所做的更改：

 Widget _gridView (BuildContext context) {
    double cardWidth = MediaQuery.of(context).size.width / 6;
    double cardHeight = MediaQuery.of(context).size.height / 3;
   
    return GridView.count(
         crossAxisCount: 2,
        scrollDirection: Axis.horizontal,
        mainAxisSpacing: 5,
        crossAxisSpacing: 3,
        childAspectRatio: cardWidth / cardHeight,
        children: List.generate(6, (index) {
          return Container(
              alignment: Alignment.center,
              child: SizedBox(
                  child: FloatingActionButton(
                    backgroundColor: Colors.green,
                    child: null,
                    onPressed: () {
                      print("Cliked");
                    },)
              ));
        })
    );
  } 

输出：

不要忘记在此方法中传递上下文。