Flutter学习之路->bottomNavigationBar切换页面的坑

看似一个普通的bottomNavigationBar进行状态切换 这样body里的页面虽然是不可变的 但是每次body都会重置子页面 导致了子页面 HomePage、ClassPage等void initState() 不断被调用

import 'package:digital_filling/pages/bottom_bar.dart';
import 'package:digital_filling/pages/class_page.dart';
import 'package:digital_filling/pages/home_page.dart';
import 'package:digital_filling/pages/mine_page.dart';
import 'package:digital_filling/pages/paint_page.dart';
import 'package:flutter/material.dart';

import '../common/size_config.dart';



class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  final List<Widget> _pageList = [
    const HomePage(),
    const ClassPage(),
    const PaintPage(),
    const MinePage()
  ];

  int selectIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    SizeConfig.init(context);
    return Scaffold(
        body: _pageList[selectIndex],
        bottomNavigationBar: Theme(
            data: ThemeData(
              canvasColor: const Color(0xfff6f6fb),
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            ),
            child: WaterDropBottomNavigationBar(onUpdateIndex: (index) {
              setState(() {
                selectIndex = index;
              });
            })));
  }
}

解决方案 用IndexedStack来控制显示隐藏 这样就会保证页面是同一个 而不会每次子页面都重新创建

import 'package:digital_filling/pages/bottom_bar.dart';
import 'package:digital_filling/pages/class_page.dart';
import 'package:digital_filling/pages/home_page.dart';
import 'package:digital_filling/pages/mine_page.dart';
import 'package:digital_filling/pages/paint_page.dart';
import 'package:flutter/material.dart';

import '../common/size_config.dart';

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  final List<Widget> _pageList = [
    const HomePage(),
    const ClassPage(),
    const PaintPage(),
    const MinePage()
  ];

  int _selectIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    SizeConfig.init(context);
    return Scaffold(
        body: IndexedStack(
          index: _selectIndex,
          children: _pageList,
        ),
        bottomNavigationBar: Theme(
            data: ThemeData(
              canvasColor: const Color(0xfff6f6fb),
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            ),
            child: WaterDropBottomNavigationBar(onUpdateIndex: (index) {
              setState(() {
                _selectIndex = index;
              });
            })));
  }
}
```
```