2つのListViewを含むTabBarがあります。それぞれに250個のアイテムがあります。各ListViewにPageStorageKeyを使用して、ビューを切り替えるときにスクロール位置を保持しています。
スクロール位置があまり変わっていないときに最初にタブを切り替えると、たとえばリストの最初で、タブをすばやく切り替えることができます。
ただし、各リストの最後までスクロールして2つのタブを切り替えると、リストが実際に表示されるまでに顕著な遅延が発生します。
ここでパフォーマンスを向上させるためにできることはありますか?
参照: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]}'),
);
},
);
}
}
すべてのListViewの子の高さが同じである場合、ListViewにはitemExtentというプロパティがあり、子の高さをdoubleで指定できます。これにより、スクロールのパフォーマンスが大幅に向上します。
ListViewの子の高さが異なる場合、できることはあまりありませんが、デバッグモードでこれをテストしている場合は、代わりにリリースモードで試してください。スクロール動作は、リリースモードよりもデバッグモードでログが遅くなります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加