Flutter 流畅度优化组件 Keframe

·  阅读 1384

Keframe之列表流畅度优化

这是一个通用的流畅度优化方案,通过分帧渲染优化由构建导致的卡顿,例如页面切换或者复杂列表快速滚动的场景。

image.png

image.png

监控工具来自:fps_monitor

指标详细信息:页面流畅度不再是谜!调试神器开箱即用,Flutter FPS检测工具

未优化的代码

import 'package:flutter/material.dart';

class ListViewPage2 extends StatefulWidget {
  @override
  _ListViewState2 createState() => _ListViewState2();
}

class _ListViewState2 extends State {
  List<String> goodsList = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 40; i++) {
      goodsList.add('${i}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: goodsList.length,
        itemBuilder: (BuildContext context, int index) {
          String model = goodsList[index];
          return Container(
              height: 40,
              color: Colors.greenAccent,
              padding: EdgeInsets.only(left: 16, top: 16),
              child: Text('子ListView 条目$model'));
        });
  }
}

优化的代码

import 'package:flutter/material.dart';
import 'package:keframe/frame_separate_widget.dart';

class ListViewPage extends StatefulWidget {
  @override
  _ListViewState createState() => _ListViewState();
}

class _ListViewState extends State {
  ScrollController _scrollController = ScrollController();

  bool _atEdge = false;
  List<String> goodsList = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 40; i++) {
      goodsList.add('${i}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: goodsList.length,
        itemBuilder: (context, index) {
          String model = goodsList[index];
          return FrameSeparateWidget(
              index: index,
              placeHolder: Container(
                height: 40,
                color: Colors.greenAccent,
                padding: EdgeInsets.only(left: 16, top: 16),
              ),
              child: Container(
                  height: 40,
                  color: Colors.greenAccent,
                  padding: EdgeInsets.only(left: 16, top: 16),
                  child: Text('子ListView 条目$model')));
        });
  }
}


效果对比

image.png

优化前

image.png

优化后

image.png

参考 github.com/LianjiaTech…

使用文档 github.com/LianjiaTech…

参考 juejin.cn/user/430969…

分类:
Android
标签:
分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改