我想要 2 个带有 ListView 的选项卡页共享一个 RefreshIndicator。但是,RefreshIndicator 必须具有 Scrollable 作为子级(TabBarView 则不然),因此我尝试为每个选项卡创建 2 个 RefreshIndicators,如下面的代码所示。
但这带来了一个不同的问题,我还想要一个浮动的 AppBar,这意味着我必须使用 NestedScrollView。因此,每当我向下滚动时,我最终都会触发 RefreshIndicators 的 onRefresh 方法。而我只需要一个来刷新。
import 'package:flutter/material.dart';
main() {
runApp(
MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
floating: true,
snap: true,
bottom: TabBar(
tabs: [
Tab(text: 'Page1'),
Tab(text: 'Page2'),
],
),
),
];
},
body: TabBarView(
children: [
Page(1),
Page(2),
],
),
),
),
),
),
);
}
class Page extends StatefulWidget {
final pageNumber;
Page(this.pageNumber);
createState() => PageState();
}
class PageState extends State<Page> with AutomaticKeepAliveClientMixin {
get wantKeepAlive => true;
build(context){
super.build(context);
return RefreshIndicator(
onRefresh: () => Future(() async {
print('Refreshing page no. ${widget.pageNumber}'); // This prints twice once both tabs have been opened
await Future.delayed(Duration(seconds: 5));
}),
child: ListView.builder(
itemBuilder: ((context, index){
return ListTile(
title: Text('Item $index')
);
}),
)
);
}
}
AutomaticKeepAliveClientMixin 可以防止每次切换选项卡时重建页面,因为这在我的实际应用程序中是一个昂贵的过程。
对两个选项卡使用单个 RefreshIndicator 的解决方案将是最理想的,但我们将不胜感激。