之前介绍过Flutter的调试工具DevTools的使用，
Flutter应用如何调试–DevTools介绍(上)
Flutter应用如何调试–DevTools介绍(中)
Flutter应用如何调试–DevTools介绍(下)
本周接到一个需求，需求里面有一个滑动吸顶效果，于是就写了一个demo调研，先看最终效果吧，以下测试是在iPhone6上进行，当然可能有更好的方案，欢迎一起交流。
- 吸顶效果主要基于SliverToBoxAdapter，SliverPersistentHeader，SliverPersistentHeaderDelegate 三个widget来实现
- 顶部绿色部分是SliverToBoxAdapter，棕色部分
Pinned Area即需要吸附的部分，是一个SliverPersistentHeader，它需要实现一个代理，即SliverPersistentHeaderDelegate，以及需要一个属性pinned来标识是否固定，底部列表也是包裹在一个SliverToBoxAdapter中。 - 以上三个widget都是作为
ScrollView的子widget存在，被CustomScrollView包裹着，因为需要监听滑动区域。 - CustomScrollView有一个
controller属性，我们定义一个ScrollController用来监听滑动偏移量。
核心代码如下：
@override
Widget build(BuildContext context) {
print('========build=========');
return SafeArea(
child: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
topGreenArea(),
pinnedArea(),
listArea(),
],
),
);
}
Widget topGreenArea() {
return SliverToBoxAdapter(
child: Container(
color: Colors.green,
height: pinnedHeight,
),
);
}
Widget pinnedArea() {
return SliverPersistentHeader(
pinned: _isPinned,
delegate: SliverDelegate(
child: Container(
height: 100,
color: Colors.brown,
child: Container(
alignment: Alignment.center,
child: Text('Pinned Area'),
),
),
maxHeight: 44,
minHeight: 44,
),
);
}
Widget listArea() {
return SliverToBoxAdapter(
child: Container(
color: Colors.cyan,
height: _listViewCount * 120.0,
child: ListView.builder(
key: testKey,
physics: NeverScrollableScrollPhysics(),
itemCount: _listViewCount,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 120,
color: Colors.primaries[index % Colors.primaries.length],
alignment: Alignment.center,
child: Text(
'$index',
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
},
),
),
);
}
以及用来监听滑动偏移量的_scrollController，放置在initState内
@override
void initState() {
_scrollController = ScrollController();
_scrollController.addListener(() {
if (_scrollController.offset >= pinnedHeight) {
_isPinned = true;
setState(() {});
} else {
_isPinned = false;
setState(() {});
}
});
super.initState();
}
- 监听
_scrollController.offset大于等于pinnedHeight高度时说明pinnedArea已经滑动到了屏幕的顶部，可以设置_isPinned = true;然后进行setState(() {});操作，这样SliverPersistentHeader也即demo中的pinnedArea区域就可以固定了，当下滑偏移量小于pinnedHeight时，再将_isPinned = false;这样pinnedArea可以继续随着ScrollView进行滑动 - 我们看到在debug模式下界面有些卡顿。
下面是Android studio右侧Flutter Performance里面的截图，如果不明白怎么操作的话，可以参考Flutter应用如何调试–DevTools介绍(下)
优化前.png
只是滑动了十来次，ListView被重新build了一千多次，因为scrollController.offset每一秒都会改变很多次，经过代码排查很容易发下问题，我们调用了太多的setState操作，仔细想想，其实我们只需要在是否吸顶的临界点进行一次setState即可，代码修改如下：
@override
void initState() {
_scrollController = ScrollController();
_scrollController.addListener(() {
if (_scrollController.offset >= pinnedHeight) {
if (_isPinned == false) {
_isPinned = true;
setState(() {});
}
} else {
if (_isPinned == true) {
_isPinned = false;
setState(() {});
}
}
});
super.initState();
}
重新运行我们发现效果好了很多，只会在吸顶效果触发的时候build一次，下图是我滑动了20次的截图
可以看到ListView的构建从1000次量级降到了20次，性能有了一定的提升
- 这里ListView构建了20次，ListView有10个item，item的子节点有
Container和Text，因此ListView Rebuild一次，Container和Text会Rebuild 10次。 - 虽然经过优化效果好了很多，但是每次吸顶效果触发的时候ListView重新rebuild也会导致一帧的卡顿。
目前都是在debug模式下进行调试的，想真正的分析APP性能，我们需要运行在Profile模式下，如何运行在Profile模式看这里Flutter应用如何调试--DevTools介绍(上)
通过Profile模式下的TimeLine分析Flutter应用如何调试–DevTools介绍(中)-Timeline工具
我们可以看到的确是由于ListView的rebuil占用了最多的时间，导致性能低下。
回头再看demo代码
Widget pinnedArea() {
return SliverPersistentHeader(
pinned: _isPinned, // 是否吸顶
delegate: SliverDelegate(
child: Container(
height: 100,
color: Colors.brown,
child: Container(
alignment: Alignment.center,
child: Text('Pinned Area'),
),
),
maxHeight: 44,
minHeight: 44,
),
);
}
是否吸顶和下面的ListView区域其实是没有关系的，那我们只需要监听到偏移量时进行局部刷新就好了，接下来就是对demo进行状态管理了，我们借助Provider进行。
首先建立Provider的数据管理部分，这一部分我觉得可以用来当做MVVM中的VM部分。
class Course with ChangeNotifier {
bool _isPinned = false;
bool get isPinned => _isPinned;
void pinnedChanged() {
_isPinned = !_isPinned;
notifyListeners();
}
}
然后对需要共享状态isPinned所在的带有State的类进行一层包装，引入Provider
class DataPickerProvider extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => Course()),
],
child: DataPicker1(),
);
}
}
最后就是使用共享的状态啦，之前使用到的地方有两处：
- 更改_isPinned状态
if (_scrollController.offset >= pinnedHeight) {
if (_myCourseHeaderPinned == false) {
_myCourseHeaderPinned = true;
context.read<Course>().pinnedChanged();
// setState(() {});
}
} else {
if (_myCourseHeaderPinned == true) {
_myCourseHeaderPinned = false;
context.read<Course>().pinnedChanged();
// setState(() {});
}
}
这里需要进行状态读取read然后，调用pinnedChanged进行修改。可以看到这里已经不再使用全局刷新setState了。
- SliverPersistentHeader的只读属性
pinned: context.watch<Course>().isPinned,
由于我们只刷新吸顶部分，并且使用了Provider进行状态管理，我们可以把这部分抽离出来，并且继承自StatelessWidget即可满足。
class PinnedArea extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverPersistentHeader(
pinned: context.watch<Course>().isPinned,
delegate: SliverDelegate(
child: Container(
height: 100,
color: Colors.brown,
child: Container(
alignment: Alignment.center,
child: Text('Pinned Area'),
),
),
maxHeight: 44,
minHeight: 44,
),
);
}
}
进行了第二次优化，效果见开篇部分就很流畅了，只是眼睛看起来还不够，在基于
Flutter Performance进行一轮分析
可以看到
- 即使是老的iPhone6上，debug模式下，每帧所花费时间也在
8s以下 - 滑动了17次，可以看到ListView只在初始构建的时候Build了
1次，之后由于全都是局部刷新，不会再次出发build，图中构建了17次的部分是，顶部区域划出了屏幕外，再进来的时候重新构建的。
两次优化分别从从1000次量级降到了10位数量级，又从10位数量级降为了1次。最总效果可以说是比较流畅了，记录这次优化过程，如有不足之处请告诉我，欢迎大家一起交流。
还有一个小点，这里构建ListView使用了ListView.builder构建，这也是官方推荐的方式，请参考我翻译的文章Creating a ListView that loads one page at a time
