Flutter 流畅度优化组件 Keframe-一一网

Keframe之列表流畅度优化

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

监控工具来自：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')));
        });
  }
}


复制代码