如何在 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,
                )),
      ),
    );
  }
}

你可以按照你想要的方式裝飾。