PageStorageKey的Flutter ListView性能问题

Question

我有一个TabBar，其中包含两个ListView-每个都有250个项目。我为每个ListView使用PageStorageKey来在视图之间切换时保留滚动位置。

如果滚动位置没有太大变化时，如果我最初在选项卡之间切换-例如，在列表的开头，选项卡之间的切换便清晰快捷。

但是，如果我滚动到每个列表的末尾并在两个选项卡之间切换，则在实际显示列表之前会有明显的滞后。

我有什么办法可以改善此处的性能？

请参阅：https://gist.github.com/kungfuslippers/fcae96675fb76c10f7bb5051b66ed87e

或下面的代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
      itemsA: List<String>.generate(250, (i) => "Item $i"),
      itemsB: List<String>.generate(250, (i) => "Item $i")));
}

class MyApp extends StatefulWidget {
  final List<String> itemsA;
  final List<String> itemsB;

  MyApp({Key key, @required this.itemsA, this.itemsB}) : super(key: key);

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

class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  TabController _tabController;

  final Key listKeyA = PageStorageKey('listA');
  final Key listKeyB = PageStorageKey('listB');


  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 2);
  }

  @override
  Widget build(BuildContext context) {
    final title = 'Long List';

    return MaterialApp(
        title: title,
        home: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: TabBarView(controller: _tabController, children: [
            ListWidget(key: listKeyA, items: widget.itemsA),
            ListWidget(key: listKeyB, items: widget.itemsB),
          ]),
          bottomNavigationBar: Container(
            color: Colors.blue,
            child: TabBar(
              controller: _tabController,
              indicatorColor: Colors.white,
              tabs: <Widget>[Tab(text: "ListA"), Tab(text: "ListB")],
            ),
          ),
        ));
  }
}

class ListWidget extends StatefulWidget {
  final List<String> items;

  const ListWidget({
    Key key,
    @required this.items,
  }) : super(key: key);

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

class ListWidgetState extends State<ListWidget> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: widget.items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('${widget.items[index]}'),
        );
      },
    );
  }
}

Answer 1

如果所有ListView子级都具有相同的高度，则ListView具有一个名为itemExtent的属性，您可以将其子级的高度指定为两倍。这将大大改善您的滚动性能。

如果您的ListView子级具有不同的高度，那么您将无能为力，但是，如果要在调试模式下进行测试，请改为在发布模式下进行测试。滚动行为在调试模式下比在释放模式下运行时间长。