Flutter 基于StaggeredGridView封装首页双Feed列表

添加依赖

pubspec.yaml

flutter_staggered_grid_view: ^0.3.3

完整示例

class HomeTabPage extends StatefulWidget {
  final String name;
  final List<BannerMo> bannerList;

  HomeTabPage(this.name, {this.bannerList});

  @override
  _HomeTabPageState createState() => _HomeTabPageState();
}

class _HomeTabPageState extends State<HomeTabPage> {
  List<VideoMo> videoList = [];
  int pageIndex;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removePadding(
      // 移除顶部top
      removeTop: true,
      context: context,
      child: StaggeredGridView.countBuilder(
        itemCount: videoList.length,
        padding: EdgeInsets.only(top: 10, left: 10, right: 10),
        itemBuilder: (BuildContext context, int index) {
          if (widget.bannerList != null && index == 0) {
            return Padding(
                padding: EdgeInsets.only(bottom: 8), child: _banner());
          } else {
            return VideoCard(
              videoMo: videoList[index],
            );
          }
        },
        staggeredTileBuilder: (int index) {
          if (index == 0) {
            // Banner 独占两列
            return StaggeredTile.fit(2);
          } else {
            return StaggeredTile.fit(1);
          }
        },
      ),
    );
  }

  /**
   * 构建Banner Widget
   */
  _banner() {
    return Padding(
        padding: EdgeInsets.only(left: 8, right: 8),
        child: HiBanner(widget.bannerList));
  }

  void _loadData({loadMore = false}) async {
    if (!loadMore) {
      pageIndex++;
    }
    try {
      // 访问网络
      var currentIndex = pageIndex + (loadMore ? 1 : 0);
      var result = await await HomeDao.get(widget.name,
          pageIndex: currentIndex, pageSize: 30);
      // 更新数据
      setState(() {
        if (loadMore) {
          videoList = [...videoList, result.videoList];
          pageIndex++;
        } else {
          videoList = result.videoList;
        }
      });
    } on NeedAuth catch (e) {
      print(e);
      showWarnToast(e.message);
    } on HiNetError catch (e) {
      print(e);
      showWarnToast(e.message);
    }
  }
}