Flutter仿京东实战项目四-首页瀑布流

大熊爱睡觉
366 阅读2分钟

好久好久没写代码了，由于最近可能要找工作，所以我准备找个项目写写练练手、找找写代码的感觉。由于我又是个喜新厌旧的人，所以准备找个我不熟的Flutter来写写。

京东我用的比较多，所以我准备用Flutter仿一个，尽量做到一比一还原功能

写这个文章的原则和内容

  • 类似简单布局的东西都是一带而过、毕竟这些东西我们只要多试试就能写对了
  • 能用现成的组件和开源库，就一定不自己写
  • 我很懒、不会讲具体代码实现，但是我会把思路和步骤过程记录下来
  • 会记录下我实现功能中遇到的各种坑和有意思的地方
  • 我写的很随意，想到啥写到啥，可能会忘了很多东西，后来会补上

代码地址：github.com/nppp1990/jd…

因为代码还在更新，所以现在还是半成品；我会边更新代码边更新文章的

功能实现

flutter瀑布流用的最多的库是这个 flutter_staggered_grid_view

怎么用看官网吧，貌似很复杂的，我还没看懂，我都是一个个试出来的

随机高度的瀑布流

京东首页的瀑布流的item是高度随机的，用staggered_grid_view实现出来性能较差

image.png

8841693295282_.pic.jpg

固定高度的瀑布流

当然如果高度是规定的，用SliverGrid实现性能会好很多

image.png

8861693295311_.pic.jpg

配合下拉刷新组件更新数据

下拉刷新用的是flutter_staggered_grid_view，所以child必须是ListView、GridView、CustomScrollView

官网有说明 image.png

又由于这个Grid上面还有其他布局，没法直接用GridView，所以我们只能用CustomScrollView

需要用SliverToBoxAdapter包一层或者直接用Sliver image.png

下拉刷新和下拉加载更多代码如下，可以利用ValueNotifier做局部刷新

// 瀑布流测试数据count
late ValueNotifier<int> _gridCountNotifier;

@override 
void initState() {
  _gridCountNotifier = ValueNotifier(12); 
}

onRefresh: () async {
  print('-----onRefresh');
  await Future.delayed(const Duration(milliseconds: 1000));
  _gridCountNotifier.value = 12;
  _refreshController.refreshCompleted();
},
onLoading: () async {
  await Future.delayed(const Duration(milliseconds: 1000));
  _gridCountNotifier.value = _gridCountNotifier.value + 12;
  _refreshController.loadComplete();
},

ValueListenableBuilder(
    valueListenable: _gridCountNotifier,
    builder: (_, count, child) => SliverPadding(
        padding: const EdgeInsets.only(left: 10, right: 10, top: 10), sliver: buildSliverGrid(count))),
avatar
文章
阅读
粉丝