Flutter 创建一个带有ButtonNavigation界面

这个时候我们需要用到StatefulWidget

class MyIndexContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationWidget();
  }
}

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomNavigationWidgetState();
}

//这里需要继承自State组件，动态改变数据后需要通过setState() 方法里面改变数据。
class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomNavigationColor = Colors.blue;
  int _currentIndex = 0;

  //主页面
  final _pages = [HomePage(), MsgPage(), CartPage(), PersonPage()];

  @override
  void initState() {
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('用户注册'),
        ),
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                  color: _bottomNavigationColor,
                ),
                title: Text(
                  'HOME',
                  style: TextStyle(color: _bottomNavigationColor),
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.email,
                  color: _bottomNavigationColor,
                ),
                title: Text(
                  'Email',
                  style: TextStyle(color: _bottomNavigationColor),
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.pages,
                  color: _bottomNavigationColor,
                ),
                title: Text(
                  'PAGES',
                  style: TextStyle(color: _bottomNavigationColor),
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.airplay,
                  color: _bottomNavigationColor,
                ),
                title: Text(
                  'AIRPLAY',
                  style: TextStyle(color: _bottomNavigationColor),
                )),
          ],
          currentIndex: _currentIndex,
          fixedColor: Colors.blue,
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }
}