为什么我的扑动应用程序列表视图滚动不如颤动画廊应用程序那么流畅？

Question

我使用Flutter创建了我的滚动演示应用程序的发布版本.我想知道为什么我的应用程序的listview滚动不像flutter gallery应用程序那么流畅.我用LG G5进行了这项测试.

这是我的应用程序演示的链接

编辑: 这是代码.

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

您的代码的问题在于您使用常规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 2

Flutter在使用“ Debug”构建时并没有那么顺利，而在“ Release”构建中则运行得更加流畅（从命令行运行“ flutter run --release”）。当然，Iiro Krankka的答案也会提高列表的性能。

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 中拥有不同的小部件，则可以使用包装在 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,
           ),
        ],)
    ),
   )
 );
}

这也将修复滚动行为。