起初,采用 TabBarView + ListView 结合 TabController 的方式实现了三页列表展示。但是,切换 TabBarView 的时候,每一页需要重新绘制,导致 ListView 无法保留上次所在位置。为了解决这个问题,通过 ScrollController 的 scrollController.position.pixels 记录 ListView 停留位置,等到切换回来之时,延时100毫秒,调用 scrollController.jumpTo(value) 滚动到该位置。当然,这种方式实现没有问题,不过体验不会太好,明显可见滚动全过程。来回切换,会感觉眼花缭乱。而且三个 TabBarView ,每一个 TabBarView 的ListView 都需要记录停留位置,需要三个 ScrollController ,感觉复杂了点。
从网上了解到,PageView 类似 Android 的 ViewPager,它可以做到页面不重绘,在此记录一下。大致原理就是,PageView 的子 Widget 必须 混入 AutomaticKeepAliveClientMixin, 同时 wantKeepAlive 返回 true ,这是官方推荐做法。切换页面时,通过 PageController 控制 PageView 显示的当前页。这样是不会重绘的,所以 ListView 展示的数据不会刷新,滚动位置也不会改变。
完整demo如下:
class BgWidget extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return _BgWidget();
}
}
class _BgWidget extends State {
PageController pageController;
@override
void initState() {
super.initState();
pageController = PageController(initialPage: 0, keepPage: true);
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('PageView'),
),
body: _createBody(),
);
}
_createBody() {
return Column(
children: [
_createTab(),
Expanded(child: PageView(
scrollDirection: Axis.horizontal,
controller: pageController,
physics: NeverScrollableScrollPhysics(),
onPageChanged: (page) {
print('page = $page');
},
children: [PageListView(), PageListView(), PageListView()],
))
],
);
}
///类似tab
_createTab(){
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(child: RaisedButton(onPressed: (){
setState(() {
pageController.jumpToPage(0);
});
},child: Text('第一页'),),),
Expanded(child: RaisedButton(onPressed: (){
setState(() {
pageController.jumpToPage(1);
});
},child: Text('第二页'),),),
Expanded(child: RaisedButton(onPressed: (){
setState(() {
pageController.jumpToPage(2);
});
},child: Text('第三页'),),),
],
);
}
}
///PageView子widget
class PageListView extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return _PageListView();
}
}
class _PageListView extends State
with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
super.build(context);
return ListView.builder(
padding: EdgeInsets.only(bottom: 10),
itemCount: 100,
itemExtent: 40,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.black12,
child: Text(' 这是第 $index 行'),
);
});
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}