Flutter自定义导航栏：FloatingActionButton导航时图标不更新

问题根源 #

你的自定义底部导航栏_BottomNavigationBar内部独立维护了selectedIndex状态，但主页面的pageIndex（ValueNotifier）和导航栏的selectedIndex没有双向绑定。点击FAB时，你仅更新了主页面的pageIndex和自身的selectedIndex，但导航栏内部的状态并未同步，导致导航栏不会触发重绘，图标状态保持不变。

解决方案 #

核心思路是让导航栏的选中状态与主页面的pageIndex保持同步，取消导航栏内部的独立状态，改为依赖外部传入的统一索引。

方案一：将导航栏改为无状态组件（推荐） #

直接移除导航栏内部的状态管理，让它完全依赖外部传入的当前索引：

1. 修改_BottomNavigationBar组件：

class _BottomNavigationBar extends StatelessWidget {
  const _BottomNavigationBar({
    Key? key,
    required this.currentIndex, // 接收外部传入的当前选中索引
    required this.onItemSelected,
  }) : super(key: key);
  
  final int currentIndex;
  final ValueChanged<int> onItemSelected;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        top: false,
        bottom: true,
        child: Container(
          color: sColor,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              bottomNavigationBarItem(
                label: "Messages",
                icon: CupertinoIcons.chat_bubble_2,
                iconFilled: CupertinoIcons.chat_bubble_2_fill,
                index: 0,
                isSelected: (currentIndex == 0),
                onTap: onItemSelected,
              ),
              bottomNavigationBarItem(
                label: "contacts",
                icon: Icons.contacts_outlined,
                iconFilled: Icons.contacts,
                index: 1,
                isSelected: (currentIndex == 1),
                onTap: onItemSelected,
              ),
              bottomNavigationBarItem(
                label: "Search",
                icon: CupertinoIcons.search,
                iconFilled: CupertinoIcons.search_circle_fill,
                index: 2,
                isSelected: (currentIndex == 2),
                onTap: onItemSelected,
              ),
              bottomNavigationBarItem(
                label: "Me",
                icon: CupertinoIcons.person_crop_circle,
                iconFilled: CupertinoIcons.person_crop_circle_fill,
                index: 3,
                isSelected: (currentIndex == 3),
                onTap: onItemSelected,
              ),
            ],
          ),
        ));
  }
}

2. 修改主页面Scaffold，传递pageIndex.value给导航栏：

Scaffold(
  backgroundColor: primaryColor,
  bottomNavigationBar: _BottomNavigationBar(
    currentIndex: pageIndex.value, // 传入当前选中索引
    onItemSelected: (i) {
      pageIndex.value = i;
    },
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      pageIndex.value = 1; // 仅更新pageIndex，导航栏自动同步状态
      FocusScope.of(context).requestFocus(FocusNode());
    },
    child: const Icon(
      CupertinoIcons.chat_bubble_fill,
      color: Colors.white,
      size: 30,
    ),
    backgroundColor: Colors.blue,
  ),
  body: ValueListenableBuilder(
    valueListenable: pageIndex,
    builder: (BuildContext context, int value, _) {
      return screens[value];
    },
  ),
);

方案二：保留导航栏为有状态组件（兼容复杂场景） #

如果需要保留导航栏的状态管理逻辑，可以让它监听pageIndex的变化：

1. 修改_BottomNavigationBar组件：

class _BottomNavigationBar extends StatefulWidget {
  const _BottomNavigationBar({
    Key? key,
    required this.pageIndex, // 传入主页面的ValueNotifier
    required this.onItemSelected,
  }) : super(key: key);
  
  final ValueNotifier<int> pageIndex;
  final ValueChanged<int> onItemSelected;

  @override
  State<_BottomNavigationBar> createState() => _BottomNavigationBarState();
}

class _BottomNavigationBarState extends State<_BottomNavigationBar> {
  late int selectedIndex;

  @override
  void initState() {
    super.initState();
    selectedIndex = widget.pageIndex.value;
    // 监听pageIndex变化，同步更新内部状态
    widget.pageIndex.addListener(() {
      setState(() {
        selectedIndex = widget.pageIndex.value;
      });
    });
  }

  void handleItemSelected(int index) {
    setState(() {
      selectedIndex = index;
    });
    widget.onItemSelected(index);
  }

  @override
  Widget build(BuildContext context) {
    // 原有build代码保持不变，依然使用selectedIndex判断选中状态
    return SafeArea(
        top: false,
        bottom: true,
        child: Container(
          color: sColor,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              bottomNavigationBarItem(
                label: "Messages",
                icon: CupertinoIcons.chat_bubble_2,
                iconFilled: CupertinoIcons.chat_bubble_2_fill,
                index: 0,
                isSelected: (selectedIndex == 0),
                onTap: handleItemSelected,
              ),
              // 其余导航项代码不变
            ],
          ),
        ));
  }
}

2. 主页面传递pageIndex给导航栏：

bottomNavigationBar: _BottomNavigationBar(
  pageIndex: pageIndex,
  onItemSelected: (i) {
    pageIndex.value = i;
  },
),

以上两种方案均可实现导航栏与FAB的状态同步，点击FAB时页面跳转和图标切换会同时生效。

内容的提问来源于stack exchange，提问作者Abedalrahman Saad