如何在 Flutter 中构建这样的列表视图？

Question

我使用两列创建了这个并将列表分成两部分。 但它变得如此丑陋。 关于如何更优雅地创建这样的东西的任何建议？

ListView 具有不同高度的卡片

Answer 1

您可以将flutter_staggered_grid_view与QuiltedGridTile一起使用

class TAA extends StatelessWidget {
  const TAA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.custom(
        gridDelegate: SliverQuiltedGridDelegate(
          crossAxisCount: 2,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          repeatPattern: QuiltedGridRepeatPattern.inverted,
          pattern: [
            QuiltedGridTile(2, 1),
            QuiltedGridTile(1, 1),
          ],
        ),
        childrenDelegate:
            SliverChildBuilderDelegate((context, index) => Container(
                  color: Colors.red,
                )),
      ),
    );
  }
}

你可以按照你想要的方式装饰。