flutter 仿网易严选（三）

抽空完成了分类页面的ui，效果如下：

gifhome_480x853_6s.gif

分类页比较简单，整体是一个Row，左边是一个listView，右边因为有一个头部Bannner，所以使用了CustomScrollView。

整个页面的状态由provide管理,provide类代码：

class CategoryProvide with ChangeNotifier {
  CategoryLeftListModel categoryLeftListModel; //左大类导航model
  CategoryItemListModel categoryItemListModel; //右边子类导航model
  bool isloading = false;//是否正在请求子类数据
  int selectBigIndex = 0; //当前选中大类index

  //点击修改大类
  changeBigIndex(int selectIndex) {
    selectBigIndex = selectIndex;
    int id = categoryLeftListModel.categoryList[selectBigIndex].id;
    isloading = true;
   //视图显示刷新状态
    notifyListeners();
    //请求子类数据
    loadSubCategory(id);
  }

//加载大类数据
  loadBigCategory() async {
    await networkGet(api_bigCategory).then((val) async {
      categoryLeftListModel = CategoryLeftListModel.fromJson(val);
      await loadSubCategory(categoryLeftListModel.categoryList.first.id);
    });

  }

//加载子类数据
  loadSubCategory(id) async {
    var params = {
      'categoryId': categoryLeftListModel.categoryList[selectBigIndex].id
    };
    await networkGet(api_subCategory, paramas: params).then((val) {
      categoryItemListModel = CategoryItemListModel.fromJson(val);
      isloading = false;
      notifyListeners();
    });
  }
}

右边Banner和子类列表是一整个CustomScrollView，因为要做出类似iOS中tableView的sectionHeader效果，我把列表长度乘以2，根据index的奇偶来判断加载标题栏还是GridView。

注：

• 非Slivers家族的widget要用SliverToBoxAdapter()包裹，不然会崩溃。
• SliverChildBuilderDelegate可以边滑动边加载，类似于listView.builder。

int itemCount = categoryGroupList.length * 2;

    //滑动视图重建不保持偏移
    ScrollController _scrollController =
        ScrollController(keepScrollOffset: false);

    if (!Provide.value(context).isloading) {
      return Expanded(
        child: Container(
            child: CustomScrollView(
          controller: _scrollController,
          slivers: [
            SliverToBoxAdapter(
              child: CategoryBanner(),
            ),
            SliverList(
              delegate:
                  SliverChildBuilderDelegate((BuildContext context, int index) {
                //偶数加载标题栏，奇数加载GridView
                if (index.isOdd) {
                  return _listCell(context, index ~/ 2);
                } else {
                  final subCategoryList = categoryGroupList[index ~/ 2];
                  //无标题返回高度为0的SizedBox
                  if (subCategoryList.name.length != 0) {
                    return _sectionHeader(subCategoryList);
                  } else {
                    return SizedBox(
                      height: 0,
                    );
                  }
                }
              }, childCount: itemCount),
            )
          ],
        )),
      );
    } else {
      return Expanded(
        child: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }

第一篇链接：flutter仿网易严选（一）
第二篇链接：flutter仿网易严选（二）
第三篇链接：flutter仿网易严选（三）
第四篇链接：flutter仿网易严选（四）

终：源码地址在我的github：WXYX_HC。，有什么问题可以在评论处留言，多多交流。