Flutter中点击Circle页面返回箭头跳转至底部导航栏Home页问题

问题原因 #

DashBoard页面通过appController.selectedIndex.value切换页面，但未监听该Rx变量的变化。当在UpdatedCircle页面修改selectedIndex的值时，DashBoard的build方法不会自动触发，导致页面无法切换。

解决方案 #

1. 确保AppController中selectedIndex是可观察变量 #

确认你的AppController里的selectedIndex定义为Rx类型：

class AppController extends GetxController {
  RxInt selectedIndex = 0.obs;
}

2. 在DashBoard中监听selectedIndex变化 #

修改DashBoard的body部分，用Obx包裹，这样当selectedIndex更新时会自动重建页面：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    // 用Obx包裹body，监听selectedIndex变化
    body: Obx(() => widgetArray[appController.selectedIndex.value]),
    bottomNavigationBar: Padding(
      // 原bottomNavigationBar代码保持不变
      padding: EdgeInsets.only(bottom: 30.0, left: 75.0, right: 75.0),
      child: Container(
        width: 182.w,
        height: 48.h,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.w),
          boxShadow: const [
            BoxShadow(
              color: Color.fromRGBO(16, 31, 54, 0.12),
              blurRadius: 15.0,
              spreadRadius: 5.0,
              offset: Offset(5.0,5.0),
            )
          ],
        ),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Stack(
                alignment: Alignment.center,
                children: [
                  FABBottomAppBar(
                    backgroundColor: Colors.white,
                    selectedColor: Colors.cyanAccent,
                    onTabSelected: didTapNavigationBar,
                    items: [
                      FABBottomAppBarItem(
                        image: Image.asset(
                          appController.selectedIndex.value == 0
                              ? AppIcon.purpleHome
                              : AppIcon.BlackHome,
                          width: 25,
                        ),
                      ),
                      FABBottomAppBarItem(
                        image: Image.asset(
                          AppIcon.circleIcon,
                          width: 25,
                          color: appController.selectedIndex.value == 1
                              ? Color(0xff8054D0)
                              : Colors.black,
                        ),
                      ),
                      FABBottomAppBarItem(
                        image: Image.asset(
                          AppIcon.dashUserIcon,
                          width: 25,
                          color: appController.selectedIndex.value == 2
                              ? Color(0xff8054D0)
                              : Colors.black,
                        ),
                      ),
                    ],
                    color: AppColors.appButtonBackgroundColor,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

或者使用GetBuilder（如果更习惯这种方式）：

body: GetBuilder<AppController>(
  builder: (controller) {
    return widgetArray[controller.selectedIndex.value];
  },
),

3. 简化底部导航的点击逻辑 #

之前的setState可以完全去掉，因为Obx已经会自动处理页面重建：

void didTapNavigationBar(int index) {
  appController.selectedIndex.value = index;
}

补充说明 #

UpdatedCircle的返回按钮逻辑无需修改，因为它是作为DashBoard的body内容存在，不是通过路由跳转打开的，只需修改selectedIndex即可完成页面切换。

内容的提问来源于stack exchange，提问作者Mukesh Singh