Flutter ListView 和MasonryGridView 嵌套

1,864 阅读1分钟

1、MasonryGridView是提供一个瀑布流的flutter控件,获取方式: flutter_staggered_grid_view: any 2、运行效果:

Screenshot_1650184303.png

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],
            );
          },
        ),
    ],
  ),
);
}