Flutter BottomNavigationBarItem切换页面后状态重置

body: pageList[_currentIndex],
换为 body: IndexedStack(index: _currentIndex, children: pageList,),
猜测!是因为IndexedStack是层叠布局,多重叠加的页面理解为一个控件,每次切换页面时控件为活动状态,所以不会再次调用initstate()中的方法。

class TabNavigator extends StatefulWidget{
  @override
  State createState() {
    return _TabNavigatorState();
  }
}

class _TabNavigatorState extends State {
  Color _defaultColor = Colors.grey;
  Color _activeColor = Colors.redAccent;
  int _currentIndex = 0;
  PageController _controller = PageController(initialPage: 0);
  var pageList;

  @override
  void initState() {
     pageList = [ HomePage(),CategoryPage(),CartPage(),OrderPage(),MinePage()];
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
    print('设备宽度:${ScreenUtil.screenWidth}');
    print('设备高度:${ScreenUtil.screenHeight}');
    print('设备的像素密度:${ScreenUtil.pixelRatio}');
    return Scaffold(
//      body: pageList[_currentIndex],
    body: IndexedStack(index: _currentIndex, children: pageList,),
      bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home, color: _defaultColor,),
              activeIcon: Icon(Icons.home, color: _activeColor,),
              title: Text('首页', style: TextStyle(
                color: _currentIndex == 0 ? _activeColor : _defaultColor
              ),)
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.category, color: _defaultColor,),
              activeIcon: Icon(Icons.category, color: _activeColor,),
              title: Text('分类', style: TextStyle(
                color: _currentIndex == 1 ? _activeColor : _defaultColor
              ),)
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.shopping_cart, color: _defaultColor,),
              activeIcon: Icon(Icons.shopping_cart, color: _activeColor,),
              title: Text('购物车', style: TextStyle(
                color: _currentIndex == 2 ? _activeColor : _defaultColor
              ),)
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.content_paste, color: _defaultColor,),
              activeIcon: Icon(Icons.content_paste, color: _activeColor,),
              title: Text('订单', style: TextStyle(
                color: _currentIndex == 3 ? _activeColor : _defaultColor
              ),)
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person, color: _defaultColor,),
              activeIcon: Icon(Icons.person, color: _activeColor,),
              title: Text("个人中心", style: TextStyle(
                color: _currentIndex == 4 ? _activeColor : _defaultColor
              ),)
            )
          ],
        currentIndex: _currentIndex,
        onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
        },
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

你可能感兴趣的:(Flutter BottomNavigationBarItem切换页面后状态重置)