当前位置：首页 » 《随便一记》 » 正文

关于flutter列表的性能优化，你必须要了解的_萌小肆

11 人参与  2022年05月19日 15:24  分类 : 《随便一记》  评论

点击全文阅读


这里是坚果前端小课堂，大家喜欢的话，可以关注我的公众号“坚果前端，”，或者加我好友，获取更多精彩内容

嵌套列表 - ShrinkWrap 与 Slivers

image-20211121091304290

使用 ShrinkWrap 的列表列表

下面是一些使用ListView对象呈现列表列表的代码，内部列表的shrinkWrap值设置为 true。shrinkWrap强行评估整个内部列表，允许它请求有限的高度，而不是通常的ListView对象高度，即无穷大！

下面是基本的代码结构：

ListView(
  // Setting `shrinkWrap` to `true` here is both unnecessary and expensive.
  children: <Widget>[
    ListView.builder(
      itemCount: list1Children.length,
      itemBuilder: (BuildContext context, int index) {
        return list1Children[index];
      },
      // This forces the `ListView` to build all of its children up front,
      // negating much of the benefit of using `ListView.builder`.
      shrinkWrap: true,
    ),
    ListView.builder(
      itemCount: list2Children.length,
      itemBuilder: (BuildContext context, int index) {
        return list2Children[index];
      },
      // This forces the `ListView` to build all of its children up front,
      // negating much of the benefit of using `ListView.builder`.
      shrinkWrap: true,
    ),
    ...
  ],
)

注意：观察外部ListView没有将其shrinkWrap 值设置为true。只有内部列表需要设置shrinkWrap。

另请注意：虽然ListView.builder（默认情况下）有效地构建其子项，为您节省构建屏幕外小部件的不必要成本，但设置 shrinkWrap为true覆盖此默认行为！

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(ShrinkWrApp());
}

class ShrinkWrApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ShrinkWrap vs Slivers',
      home: Scaffold(
        appBar: AppBar(
          title: const Text("ShrinkWrap, Street Rat, I don't, Buy that!"),
        ),
        body: const ShrinkWrapSlivers(),
      ),
    );
  }
}

class ShrinkWrapSlivers extends StatefulWidget {
  const ShrinkWrapSlivers({
    Key? key,
  }) : super(key: key);

  @override
  _ShrinkWrapSliversState createState() => _ShrinkWrapSliversState();
}

class _ShrinkWrapSliversState extends State<ShrinkWrapSlivers> {
  List<ListView> innerLists = [];
  final numLists = 15;
  final numberOfItemsPerList = 100;

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < numLists; i++) {
      final _innerList = <ColorRow>[];
      for (int j = 0; j < numberOfItemsPerList; j++) {
        _innerList.add(const ColorRow());
      }
      innerLists.add(
        ListView.builder(
          itemCount: numberOfItemsPerList,
          itemBuilder: (BuildContext context, int index) => _innerList[index],
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: numLists,
        itemBuilder: (context, index) => innerLists[index]);
  }
}

@immutable
class ColorRow extends StatefulWidget {
  const ColorRow({Key? key}) : super(key: key);

  @override
  State createState() => ColorRowState();
}

class ColorRowState extends State<ColorRow> {
  Color? color;

  @override
  void initState() {
    super.initState();
    color = randomColor();
  }

  @override
  Widget build(BuildContext context) {
    print('Building ColorRowState');
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            randomColor(),
            randomColor(),
          ],
        ),
      ),
      child: Row(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(height: 50, width: 50, color: Colors.white),
          ),
          Flexible(
            child: Column(
              children: const <Widget>[
                Padding(
                  padding: EdgeInsets.all(8),
                  child: Text('这里是 坚果前端小课堂!',
                      style: TextStyle(color: Colors.white)),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Color randomColor() =>
    Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);

一切都建立起来！

当您滚动浏览此 UI 并注意该ColorBarState.build方法的调用方式时，会出现可怕的部分 。每个内部列表包含 100 个元素，因此当 UI 加载时，您会立即看到 100 个“Building ColorBarState”的实例打印到控制台，

更糟糕的是，一旦向下滚动大约一百行，就会再生成一百行。😱😱😱

image-20211121091304290

而且你滑动的快的时候列表会抖动！

重新构建嵌套列表

要了解如何使您的用户免受卡顿威胁，请等待我的第二节，下一节将使用 Slivers 而不是 ListViews 重建相同的 UI。

使用 Slivers 的列表列表

下面的代码构建了与之前相同的 UI，但这次它使用Slivers 而不是收缩包装ListView对象。本页的其余部分将引导您逐步完成更改。

如何将嵌套列表迁移到 Slivers

第1步

首先，将最外面的 ListView 更改为SliverList.

// Before
@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: numberOfLists,
    itemBuilder: (context, index) => innerLists[index],
  );
}

变成：

// After
@override
Widget build(BuildContext context) {
  return CustomScrollView(slivers: innerLists);
}

第2步

其次，将内部列表的类型从List<ListView>更改为 List<SliverList>。

// Before
List<ListView> innerLists = [];

变成：

// After
List<SliverList> innerLists = [];

第 3 步

现在是时候重建内部列表了。的SliverList类是比原始略有不同ListView的类，与主要差异是的外观delegate。

原始版本ListView对所有内容都使用对象，不知道内部构建器构造函数将被shrinkWrap.

// Before
@override
void initState() {
  super.initState();
  for (int i = 0; i < numberOfLists; i++) {
    final _innerList = <ColorRow>[];
    for (int j = 0; j < numberOfItemsPerList; j++) {
      _innerList.add(const ColorRow());
    }
    innerLists.add(
      ListView.builder(
        itemCount: numberOfItemsPerList,
        itemBuilder: (BuildContext context, int index) => _innerList[index],
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
      ),
    );
  }
}

更改后，ListView对象被替换为SliverList对象，每个对象都使用一个SliverChildBuilderDelegate来提供高效的按需构建。

// After
@override
void initState() {
  super.initState();
  for (int i = 0; i < numLists; i++) {
    final _innerList = <ColorRow>[];
    for (int j = 0; j < numberOfItemsPerList; j++) {
      _innerList.add(const ColorRow());
    }
    innerLists.add(
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) => _innerList[index],
          childCount: numberOfItemsPerList,
        ),
      ),
    );
  }
}

完整代码：

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(SliversApp());
}

class SliversApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ShrinkWrap vs Slivers',
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Revenge of the Slivers"),
        ),
        body: const ShrinkWrapSlivers(),
      ),
    );
  }
}

class ShrinkWrapSlivers extends StatefulWidget {
  const ShrinkWrapSlivers({
    Key? key,
  }) : super(key: key);

  @override
  _ShrinkWrapSliversState createState() => _ShrinkWrapSliversState();
}

class _ShrinkWrapSliversState extends State<ShrinkWrapSlivers> {
  List<SliverList> innerLists = [];
  final numLists = 15;
  final numberOfItemsPerList = 100;

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < numLists; i++) {
      final _innerList = <ColorRow>[];
      for (int j = 0; j < numberOfItemsPerList; j++) {
        _innerList.add(const ColorRow());
      }
      innerLists.add(
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) => _innerList[index],
            childCount: numberOfItemsPerList,
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(slivers: innerLists);
  }
}

@immutable
class ColorRow extends StatefulWidget {
  const ColorRow({Key? key}) : super(key: key);

  @override
  State createState() => ColorRowState();
}

class ColorRowState extends State<ColorRow> {
  Color? color;

  @override
  void initState() {
    super.initState();
    color = randomColor();
  }

  @override
  Widget build(BuildContext context) {
    print('Building ColorRowState');
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            randomColor(),
            randomColor(),
          ],
        ),
      ),
      child: Row(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(height: 50, width: 50, color: Colors.white),
          ),
          Flexible(
            child: Column(
              children: const <Widget>[
                Padding(
                  padding: EdgeInsets.all(8),
                  child: Text('这里是坚果前端小课堂!',
                      style: TextStyle(color: Colors.white)),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Color randomColor() =>
    Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);

Lazy building！

上面的代码已经应用了这些更改。运行应用程序并注意 Flutter 不再需要立即渲染 100 个 ColorRow 小部件。当您滚动时，会动态构建更多小部件，正如您所期望的那样。更好的是，一直滚动到下一个列表也不会产生任何特殊费用。

Flutter 会根据需要重新构建小部件，而且很快。

这节课对你来说怎么样，可以的话，支持一下吧

你快速的滑动的时候会发现，这个时候的列表没有抖动！


点击全文阅读


本文链接：http://zhangshiyu.com/post/40464.html

列表  构建  对象  
<< 上一篇 下一篇 >>

  • 评论（0）
  • 赞助本站

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

  • 林柒薇宋延桉小说全文免费阅读穿到八零年代和司令丈夫离婚那天全文免费阅读
  • 《七零：那两口子万人嫌，太发癫了》完整版-盛春香裴清远在线全文阅读
  • 最新小说被山里糙汉追着满地跑主角闵小小闵烨全文在线阅读
  • 《看到三十年后的联姻生活，我决定离婚》颜雯程绛-小说txt全文阅读
  • 你敢说话，我就敢质疑主角是李云初张景小说百度云全文完整版阅读
  • 娶资助的贫困生当晚，她和竹马一起入洞房小说(完结)-安枫符垚无删减阅读
  • 心机女插足后，她和相亲对象闪婚了（全本）姜初棠夏芝芝完整章节列表免费阅读
  • 沈糯周钦然《老公白月光在我家别墅养胎》全章节免费阅读
  • 儿子被侍女掉包后，我赢麻了小说最新章节-主角明玉林硕林盛全文免费阅读
  • 综清穿：美人娇宠在线全文阅读-主人公富察琅嬅弘历小说
  • 最完整版快穿：我为大佬生个娃热门连载小说
  • ***下乡？转头相亲嫁首长被娇宠by持舟

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1