Flutter BottomNavigationBar切换页面但选中状态不更新问题求助

问题根源很明确：你的自定义MyBottomNavigationBar在initState里初始化了自己的currentIndex变量，这个变量是组件内部的独立状态，和父组件page_frame.dart里的_currentPageIndex完全脱节。父组件更新页面索引后，子组件的本地currentIndex没同步，所以底部导航的选中状态一直停留在初始的Home项。

直接按下面的步骤改就行：

方案1：把自定义底部导航改成无状态组件（推荐） #

无状态组件会直接依赖父组件传递的参数渲染，不需要维护本地状态，最省心。

修改page_frame.dart #

确保点击导航项时通过setState更新_currentPageIndex，并把最新值传给子组件：

class PageFrame extends StatefulWidget {
  @override
  _PageFrameState createState() => _PageFrameState();
}

class _PageFrameState extends State<PageFrame> {
  int _currentPageIndex = 0;

  void _onPageTap(int index) {
    setState(() {
      _currentPageIndex = index;
    });
    // 这里写你的页面切换逻辑，比如根据index切换body内容
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _getCurrentPage(), // 自定义方法返回对应页面
      bottomNavigationBar: MyBottomNavigationBar(
        currentIndex: _currentPageIndex,
        onTap: _onPageTap,
      ),
    );
  }

  Widget _getCurrentPage() {
    switch (_currentPageIndex) {
      case 0:
        return HomePage();
      case 1:
        return AnnouncementPage();
      default:
        return HomePage();
    }
  }
}

修改my_bottom_navigation_bar.dart #

改成无状态组件，直接使用父组件传过来的currentIndex和onTap：

class MyBottomNavigationBar extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;

  const MyBottomNavigationBar({
    Key? key,
    required this.currentIndex,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: currentIndex, // 直接用父组件传的索引
      onTap: onTap, // 直接用父组件的点击回调
      type: BottomNavigationBarType.fixed, // 可选，防止导航项过多时样式异常
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home_outlined),
          activeIcon: Icon(Icons.home), // 可选，设置选中时的图标
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.notifications_outlined),
          activeIcon: Icon(Icons.notifications),
          label: 'Announcement',
        ),
        // 其他导航项按需添加
      ],
    );
  }
}

方案2：如果必须保留有状态子组件 #

如果你的自定义导航需要维护其他本地状态，不能改成无状态，就通过didUpdateWidget同步父组件的参数：

class MyBottomNavigationBar extends StatefulWidget {
  final int currentIndex;
  final Function(int) onTap;

  const MyBottomNavigationBar({
    Key? key,
    required this.currentIndex,
    required this.onTap,
  }) : super(key: key);

  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  late int _currentIndex;

  @override
  void initState() {
    super.initState();
    _currentIndex = widget.currentIndex;
  }

  @override
  void didUpdateWidget(MyBottomNavigationBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 父组件传的索引变化时，同步更新本地状态
    if (oldWidget.currentIndex != widget.currentIndex) {
      setState(() {
        _currentIndex = widget.currentIndex;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _currentIndex,
      onTap: widget.onTap,
      items: const [
        // 导航项内容
      ],
    );
  }
}

核心逻辑就是：子组件的选中状态必须和父组件的页面索引保持同步，不能各自维护独立的状态。按上面的方法改完，点击导航项时，父组件更新索引，子组件跟着刷新选中状态，就能正常显示当前页面对应的导航项了。

内容的提问来源于stack exchange，提问作者Nao COMATSU