如何使用行和列解决这个问题？颤振问题答案

【问题标题】：How can i solve this problem using row and column? flutter problem如何使用行和列解决这个问题？颤振问题
【发布时间】：2022-01-12 14:07:01
【问题描述】：

help_post 我需要这个问题的解决方案。我遇到了一些问题来解决它~我是一个新人。我试过了，但它不起作用...... That's The problem is given by my friend 那是我的my output 对不起我的英语不好...

【问题讨论】：

你能添加你的代码sn-p吗？
建议的练习似乎是一个有 3 列的主行。然后在每一列中，您将不得不使用填充和更多行。如果您可以分享您的代码，我们可能会为您提供更多帮助。

标签： flutter flutter-layout flutter-row

【解决方案1】：

我知道，在你的朋友任务中，你有 3 列连续，所以你的结构需要是这样的：

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, //this makes your columns be an equal width from each other
children: [
  Column(),
  Column(),
  Column(),
],
);

您还可以将每个 Column 包装在 SizedBox 中并为其指定宽度 MediaQuery.of(context).size.width * 0.25 （这样您的 Columns 将是一个大小），您可以用宽度 double.infinity 将您的 Row 包装在 SizedBox 中（以获取所有显示宽度）

下一步是为每列内的块创建类似的逻辑。祝你好运！

【讨论】：

谢谢，但我需要解决它..

【解决方案2】：

在您的情况下，使用flutter_staggered_grid_view 来实现您想要的会更容易，只需使用一个交错的 GridView 或连续使用 3 个：

StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

【讨论】：