一、前言
使用GetView
加BottomNavigationBar
布局,切换页面时,会重新build页面。这就会导致我在A页面滑动了,切换后,A页面的滑动会被初始化。
二、解决
1 IndexedStack
将
GetView
改成IndexedStack
这种方式会提前将所有子页面加载完成,不会重新build页面。实则是层叠布局,将所有子页面都渲染出来后,根据index展示相应的页面。
int currentIndex = 0;
List<Widget> _children = [
HomePage(),
MinePage()
];
List<String> titles = ['首页', '我的'];
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack( /// 在这里修改
index: currentIndex,
children: _children,
),
bottomNavigationBar: Obx(() => BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedFontSize: 14.dp,
unselectedFontSize: 14.dp,
selectedItemColor: c_EB4B8B,
unselectedItemColor: c_AA,
selectedLabelStyle: TextStyle(color: c_EB4B8B),
unselectedLabelStyle: TextStyle(color: c_AA),
currentIndex: currentIndex,
onTap: (index) async {
/// 更新页面改为如下
setState((){
currentIndex = index;
})
},
items: titles
.asMap()
.keys
.map((e) => BottomNavigationBarItem(
label: titles[e]))
.toList(),
)),
);
}
2 AutomaticKeepAlive
只有需要的再缓存,否则会容易消耗内存
只需要混入mixin,同时添加相应操作。
注意要用StatefulWidget
下的_PageState
混入。
class _PageState extends State<Page> with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
super.build(context); // 必须调用
return Center(child: Text("Test"));
}
@override
bool get wantKeepAlive => true; // 是否需要缓存
}