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

Question

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

Answer 1

使用 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需要有固定数量的cell占据横轴。对于主轴的范围，您有 03 个选项：

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

Answer 2

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