Flutter BottomNavigationBar缓存页面

一、前言

使用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; // 是否需要缓存
}