如何在 Flutter 中进行砌体布局？答案

【问题标题】：How to Make Masonry Layout in Flutter?如何在 Flutter 中进行砌体布局？
【发布时间】：2021-07-19 06:00:30
【问题描述】：

我目前正在开发一种笔记应用程序，在这里，我想将我的笔记堆叠在这种位置。

[]

我正在尝试实现这些小部件的砌体堆叠。

【问题讨论】：

标签： flutter dart flutter-layout flutter-test flutter-listview

【解决方案1】：

你也可以使用Flutter Layout Grid

运行$ flutter pub add flutter_layout_grid进行安装

使用this 代码制作

class PietPainting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: background,
      child: LayoutGrid(
        columnGap: 12,
        rowGap: 12,
        areas: '''
          r R B B  B
          r R Y Y  Y
          y R Y Y  Y
          y R g b yy
        ''',
        // A number of extension methods are provided for concise track sizing
        columnSizes: [1.0.fr, 3.5.fr, 1.3.fr, 1.3.fr, 1.3.fr],
        rowSizes: [
          1.0.fr,
          0.3.fr,
          1.5.fr,
          1.2.fr,
        ],
        children: [
          // Column 1
          gridArea('r').containing(Container(color: cellRed)),
          gridArea('y').containing(Container(color: cellMustard)),
          // Column 2
          gridArea('R').containing(Container(color: cellRed)),
          // Column 3
          gridArea('B').containing(Container(color: cellBlue)),
          gridArea('Y').containing(Container(color: cellMustard)),
          gridArea('g').containing(Container(color: cellGrey)),
          // Column 4
          gridArea('b').containing(Container(color: cellBlue)),
          // Column 5
          gridArea('yy').containing(Container(color: cellMustard)),
        ],
      ),
    );
  }
}

class PietNamedAreasApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      title: 'Layout Grid Desktop Example',
      debugShowCheckedModeBanner: false,
      color: Colors.white,
      builder: (context, child) => PietPainting(),
    );
  }
}

【讨论】：

【解决方案2】：

你可以使用flutter_staggerd_gridview包

【讨论】：