CustomScrollView实践 2023-08-16 周三

简介

今天有反馈说有两个页面比较卡，需要做一下性能优化。
在首页和商品详情页已经做过实践，这直接依样画葫芦，直接用CustomScrollView进行改造

列表

性能问题基本上离不开列表，SliverList一般要用到。记得以前这个组件看起来还是比较难用的，需要一个delegate之类的，看上去不伦不类。不过这次看了一下SliverList已经和ListView差不多了，非常方便。

• 直接给数组

  SliverList.list({
    super.key,
    required List<Widget> children,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
  })

• 给构造函数

  SliverList.builder({
    super.key,
    required NullableIndexedWidgetBuilder itemBuilder,
    ChildIndexGetter? findChildIndexCallback,
    int? itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
  })

• 带分隔线

  SliverList.separated({
    super.key,
    required NullableIndexedWidgetBuilder itemBuilder,
    ChildIndexGetter? findChildIndexCallback,
    required NullableIndexedWidgetBuilder separatorBuilder,
    int? itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
  })

SliverGrid

这个也降低使用难度了，和普通的GridView差不多了。大多数情况下直接使用下面这个

  SliverGrid.count({
    super.key,
    required int crossAxisCount,
    double mainAxisSpacing = 0.0,
    double crossAxisSpacing = 0.0,
    double childAspectRatio = 1.0,
    List<Widget> children = const <Widget>[],
  })

其他组件

• SliverPersistentHeader仍然不好用，仍然需要一个额外的类实现代理

• SliverAppBar基本没变，能用最好；不然的话，就要用SliverPersistentHeader

嵌套滑动

• NestedScrollView是现成的；能用最好；

• 如果要自定义嵌套滑动，那么就要模仿NestedScrollView的样子自己写，比较麻烦。参考以下这些文章照着做，能否成功看天意：
  Flutter 实现类似美团外卖店铺页面滑动效果

参考文章

干货 | Flutter控件CustomScrollView原理解析及应用实践

flutter性能分析

让Flutter 应用程序性能提高 10 倍的 10 个技巧