仿【閑魚】首頁做的瀑布流+頂部Header效果
IMG_5473.jpg
需要使用第三方組件：
// https://pub.dev/packages/flutter_staggered_grid_view
flutter_staggered_grid_view: ^0.7.0
瀑布流效果
61621701760118_.pic.jpg
全部代碼
// 使用CustomScrollView 可以避免一次性全部繪制問題
CustomScrollView(
slivers: [
// 可以無限設(shè)置頂部header
SliverToBoxAdapter(
child: Image.network(
ImageUtil.testImageH,
fit: BoxFit.cover,
),
),
// 瀑布流
SliverMasonryGrid.count(
// 每排顯示兩個
crossAxisCount: 2,
// 設(shè)置間距
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childCount: 20,
itemBuilder: (context, index) {
// item
return Container(
// 隨機高度
height: Random().nextInt(256).toDouble(),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
// 隨機顏色
color: Color.fromARGB(
Random().nextInt(256),
Random().nextInt(256),
Random().nextInt(256),
Random().nextInt(256)),
),
child: Center(
child: Text("Test：$index"),
));
},
),
],
)
之前見過一種ListView嵌套的剖效，ListView 這種只有兩個item（一個header，一個不瀑布流的GradView） 會導(dǎo)致一次性全部繪制出瀑布流列表，不建議使用這種嵌套
