如何在 Flutter 中制作这样的布局？

Question

我正在尝试使用 Flutter 实现这样的布局。

我尝试使用 Wrap Widget，但 Wrap 小部件给我这样的输出

我不想要框之间的垂直间隙。

Answer 1

我能够使用 flutter_staggered_grid_view

进行上述布局

这是上述解决方案的示例代码。

StaggeredGrid.count(
  crossAxisCount: 3,
  mainAxisSpacing: 3,
  crossAxisSpacing: 4,
  children: [
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Container(
        color: Colors.red,
        height: 50,
        child: const Center(
            child: Text("box 1")),
      ),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 2,
      child: Container(
        color: Colors.red,
        height: 50,
        child: const Center(
            child: Text("Box 2")),
      ),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Container(
        color: Colors.red,
        height: 50,
        child: const Center(
            child: Text("box 3")),
      ),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Container(
        color: Colors.red,
        height: 50,
        child: const Center(
            child: Text("Box 4")),
      ),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Container(
        color: Colors.red,
        height: 50,
        child: const Center(
            child: Text("Box 5")),
      ),
    ),
  ],
)

您需要导入

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Answer 2

尝试将 Row 列与 Expanded(flex: 2 , child: box) 结合使用

如何在 Flutter 中制作这样的布局？

How can I make a layout like this in Flutter?

flutter

dart

flutter-layout

responsive

flutter-web