这种图像布局样式指的是什么？可以用颤振轻松实现吗？

Question

下面我附上了一张照片布局的图像。我似乎无法获得这种图像布局格式的名称。是弹性盒吗？网格布局？此外，我想知道是否可以通过现有资产通过 flutter 创建这种图像布局格式。

Answer 1

如果您不想使用任何包（有时这是一个健康的解决方案），您可以通过组合 Columns、Rows 和 Expanded 小部件轻松实现您想要的使用 flex 属性定义您希望不同小部件占据主轴的百分比（在您的情况下，是要显示的图像）。

Answer 2

使用 flutter_staggered_grid_view 包。

在 pubspec.yaml 中，添加以下依赖项：

dependencies:
  flutter_staggered_grid_view: any

在您的库中，添加以下导入：

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

示例：

  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,
),

<块引用>

像GridView一样使用它

输出：

---

构造函数：

StaggeredGridView 遵循与 GridView 相同的构造函数约定。 还有两个构造函数：countBuilder 和 extentBuilder。这些构造函数允许您为布局定义一个构建器，并为子项定义一个构建器。

瓷砖：

StaggeredGridView 需要知道如何显示每个磁贴，以及与磁贴关联的小部件。

tile 需要在横轴上占据固定数量的单元格。对于主轴的范围，您有03 个选项：

1. 您需要固定数量的单元格 => 使用 StaggeredTile.count。
2. 您需要固定范围 => 使用 StaggeredTile.extent。
3. 您需要一个可变范围，由图块的内容定义 本身 => 使用 StaggeredTile.fit。