如何在颤动中设置gridview？仅第一行 2 卡，第二行 1 卡答案

【问题标题】：How to set the gridview in flutter? First row 2 card, and second row 1 card only如何在颤动中设置gridview？仅第一行 2 卡，第二行 1 卡
【发布时间】：2021-02-07 06:39:29
【问题描述】：

我最近刚接触 Flutter。我开始创建一个gridview。但是当我想设置我想要的顺序时遇到了问题。我想设置第一行宽2卡，第二行宽1卡。 Here's what it look like now

Expanded(
                    child: GridView.count(
                        mainAxisSpacing: 10,
                        crossAxisSpacing: 10,
                        childAspectRatio: widthScreen / heightScreen,
                        primary: false,
                        children: <Widget>[
                          Card(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8)
                            ),
                            elevation: 4,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text('Personal Data', style: cardTextStyle,)
                              ],
                            ),
                          ),
                          Card(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8)
                            ),
                            elevation: 4,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text('Personal Data', style: cardTextStyle,)
                              ],
                            ),
                          ),
                          Card(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8)
                            ),
                            elevation: 4,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text('Personal Data', style: cardTextStyle,)
                              ],
                            ),
                          )
                        ],
                        crossAxisCount: 2),
                  )

And this is the view that I want 感谢您的帮助

【问题讨论】：

stackoverflow.com/a/57833498/10285344 看到这个答案。

标签： flutter gridview view grid

【解决方案1】：

如果您只需要这 3 张卡片并且不想动态构建它们，则最好使用 2 行的列。

     Column(
        children: [
          Row(
              children: [
                Expanded(child: card),
                Expanded(child: card),
              ]
          ),
          card,
        ]
    )

Row 中的卡片将具有父级半宽，而单独的 card 将扩展为全宽。
您可能需要在没有 Row 的第二张卡片中将宽度设置为 double.maxFinite，因为默认情况下它没有限制以匹配父宽度。
您需要为卡片设置高度，如果要保持纵横比，可以使用AspectRatio 小部件。

【讨论】：