为什么我的 Flutter 应用的列表视图滚动不如 Flutter Gallery 应用流畅？

Question

我使用 Flutter 创建了我的滚动演示应用的发布版本。我想知道为什么我的应用程序的列表视图滚动不如颤振画廊应用程序流畅。我使用 LG G5 进行此测试。

这里是a link to my app's demo

编辑： 这是代码。

class ListViewSample extends StatelessWidget {
@override
Widget build(BuildContext buidContext) {
 return new Container(
  child: new Center(
    child: new ListView(
      children: createListTiles(),
    ),
   )
 );
}

List<Widget> createListTiles() {
 List<Widget> tiles = <Widget>[];
  for(int i = 0; i < 40; i++) {
   int count = i + 1;
   tiles.add(
    new ListTile(
      leading: new CircleAvatar(
        child: new Text("$count"),
        backgroundColor: Colors.lightGreen[700],
      ),
      title: new Text("Title number $count"),
      subtitle: new Text("This is the subtitle number $count"),
    )
  );
 }
 return tiles;
}

有人也有同样的经历吗？

谢谢！

Answer 1

Flutter 在“Debug”构建时不是那么流畅，在“Release”构建时运行更流畅（从命令行运行“flutter run --release”）。当然，Iiro Krankka 的回答也会提升榜单的表现。

Answer 2

您的代码的问题在于您使用的是常规的ListView，这不适用于包含大量项目的列表。所有这 40 个小部件都保存在内存中，这会导致您所遭受的不流畅的滚动体验。

如果您有大量或不定数量的项目，您应该改用ListView.builder。它只按需构建可见的列表项，这使得更大的列表可以平滑滚动。

这是一个完整的示例，您将如何迁移列表以使用构建器方法：

import 'package:flutter/material.dart';

class ListViewSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new ListView.builder(
          itemCount: 200,
          itemBuilder: (context, index) {
            final count = index + 1;

            return new ListTile(
              leading: new CircleAvatar(
                child: new Text("$count"),
                backgroundColor: Colors.lightGreen[700],
              ),
              title: new Text("Title number $count"),
              subtitle: new Text("This is the subtitle number $count"),
            );
          },
        ),
      ),
    );
  }
}

请注意，有很多项目，在本例中为 200，但滚动仍然非常流畅。

Answer 3

首先，您应该尽可能使用ListView.builder。

其次，如果问题出现在支持比显示器本身更高的输入刷新率的设备上，您应该设置resamplingEnabled 标志。例如，Pixel 4 输入以 120 Hz 运行，而显示器以 90 Hz 运行。这种不匹配会导致滚动性能变慢。

void main() {
  GestureBinding.instance.resamplingEnabled = true; // Set this flag. 
  run(MyApp());
}

Answer 4

如果你不想使用ListView.builder，因为你需要在一个ListView中有不同的widget，你可以使用包裹在SingleChildScrollView中的Column，而不是ListView，像这样：

class ListViewSample extends StatelessWidget {
@override
Widget build(BuildContext buidContext) {
 return new Container(
  child: new Center(
    child: new SingleChildScrollView(
      child: Column()
        children: <Widget>[
           headerWidget(context: context, step: 'STEP 1', text: "Company data"),
           MyTextFieldWidget(
              type: prefix0.TextFieldType.Text,
              labelText: 'Insured',
              prefsKey: COMPANY_INSURED,
              editable: false,
           ),
           MyTextFieldWidget(
              type: prefix0.TextFieldType.Text,
              labelText: 'Address 1',
              prefsKey: COMPANY_INSURED,
              editable: false,
           ),
           MyTextFieldWidget(
              type: prefix0.TextFieldType.Text,
              labelText: 'Address 2',
              prefsKey: COMPANY_INSURED,
              editable: false,
           ),
        ],)
    ),
   )
 );
}

这也将修复滚动行为。

Answer 5

Flutter 的配置文件模式编译和启动您的应用程序几乎与发布模式相同，但具有足够的附加功能来调试性能问题。例如，分析模式为分析工具提供跟踪信息。

在 Android Studio 和 IntelliJ 中，使用 Profile Mode 菜单项中的 Run > Flutter Run main.dart。

Answer 6

尝试使用 flutter run --release 运行它，它解决了我的问题

Answer 7

只需使用itemExtent: 2000,（此处为2000 是您列表的示例长度）使用此滚动机制可以利用对儿童程度的预知来节省工作。 许多人建议发布模式可以解决问题，但这是错误的。不应该。在低性能手机上，我面临 4 个选项卡下的列表视图滞后问题。