1、MasonryGridView是提供一个瀑布流的flutter控件,获取方式:
flutter_staggered_grid_view: any
2、运行效果:
3、ListView和MasonryGridView嵌套 关键设置:shrinkWrap: true, 否则会报高度错误的问题
demo代码,只贴出一部分:
var _constroller = ScrollController();
@override
Widget build(BuildContext context) {
return Center(
child: ListView(
children: [
Container(
child: Text('xxxxxxxxxxxxxxxxx'),
),
MasonryGridView.count(
controller: this._controller, // 不使用则无法滚动
shrinkWrap: true,
crossAxisCount: 2,
mainAxisSpacing: 0.0,
crossAxisSpacing: 0.0,
itemCount: count,
itemBuilder: (context, index) {
if (index == count - 1) { // 判断在builder第几个,如果到达最后一个判断是否还需要请求数据
if (finished == 'loading') {
_retrieveData();
//加载时显示loading
return Container(
padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
child: SizedBox(
width: 24.0,
height: 24.0,
child: CircularProgressIndicator(strokeWidth: 2.0),
),
);
} else {
return Container(
alignment: Alignment.center,
padding: EdgeInsets.all(16.0),
child: Text(
"没有更多了",
style: TextStyle(color: Colors.grey),
),
);
}
}
return TestCard(
picSize: this.pSize[index],
author: this.wlist1[index],
picName: this.wlist2[index],
imageUrl: this.testList[index],
);
},
),
],
),
);
}