Flutter 流暢度優化元件 Keframe

靜默的小貓發表於2021-07-13

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')));
        });
  }
}


複製程式碼