Flutter：使用DevTools进行一次性能优化

之前介绍过Flutter的调试工具DevTools的使用，
Flutter应用如何调试–DevTools介绍(上)
Flutter应用如何调试–DevTools介绍(中)
Flutter应用如何调试–DevTools介绍(下)

本周接到一个需求，需求里面有一个滑动吸顶效果，于是就写了一个demo调研，先看最终效果吧，以下测试是在iPhone6上进行，当然可能有更好的方案，欢迎一起交流。

最终效果.gif

• 吸顶效果主要基于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次的截图

第一次优化.png

可以看到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占用了最多的时间，导致性能低下。

第一次优化TimeLine.png

回头再看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进行一轮分析

最终优化.png

可以看到

• 即使是老的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