使 GridVew 项目填充 FLutter 中的空白空间答案

【问题标题】：Make GridVew Item Fill the Empty Space In FLutter使 GridVew 项目填充 FLutter 中的空白空间
【发布时间】：2021-08-05 07:13:19
【问题描述】：

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

我想要的是这样的。这个我用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，但我仍然不知道该放在哪里。

【问题讨论】：

你在说什么空格？
@EhsanAskari 我的意思是我想装满容器。我将给出预期的结果以使其更清楚。
你想让它水平滚动吗？
@EhsanAskari 是的
如果它是水平滚动的，你为什么要它填满容器？

标签： flutter dart flutter-layout

【解决方案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");
                    },)
              ));
        })
    );
  }

输出：

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

【讨论】：

您好，谢谢您的回答，但是我有一个问题，当我将项目数更改为 4 时，它仍然无法正确显示（我的意思是，它的空间变得如此之宽）。那么我们需要根据网格中的项目来改变比例吗？

【解决方案2】：

根据设备宽度设置childAspectRatio动态。

Widget _gridView(BuildContext context) {
    int length = 8;
    double height = 150;
    return GridView.count(
      crossAxisCount: 2,
      scrollDirection: Axis.horizontal,
      mainAxisSpacing: 5,
      crossAxisSpacing: 3,
      childAspectRatio: length < 7
          ? (height / 2) /
              (MediaQuery.of(context).size.width / ((length + 1) ~/ 2))
          : 2 / 3,
      children: List.generate(
        length,
        (index) {
          return Container(
            child: SizedBox(
              child: FloatingActionButton(
                backgroundColor: Colors.green,
                child: SizedBox(),
                onPressed: () {
                  print("Cliked");
                },
              ),
            ),
          );
        },
      ),
    );
  }

【讨论】：

你在 dartpad 上检查过吗？请输入输出。