Flutter中如何使用GetX在无状态组件中动态修改按钮文本

原代码存在的问题 #

1. currentPageIndex = 0.obs定义在build方法内，每次组件重建都会重置为0，无法持久保存页面索引状态
2. 没有与PageView的页面切换事件关联，滑动PageView时索引不会自动更新

解决方案步骤 #

1. 将页面索引状态移至OnBoardingController中维护，利用GetX的响应式状态管理实现自动更新
2. 在Controller中绑定PageController，监听页面切换事件同步索引
3. 按钮组件通过Obx监听Controller中的索引变化，动态切换文本

修改后的OnBoardingController代码 #

class OnBoardingController extends GetxController {
  // 响应式当前页面索引
  final currentPageIndex = 0.obs;
  // 控制PageView的控制器
  final PageController pageController = PageController();

  // 跳转下一页逻辑
  void nextPage() {
    // 假设总共有3个引导页，索引0、1、2
    if (currentPageIndex.value < 2) {
      pageController.nextPage(
        duration: const Duration(milliseconds: 300),
        curve: Curves.ease,
      );
    } else {
      // 最后一页点击后的跳转逻辑，示例：跳转到首页
      Get.offAll(() => const HomeScreen());
    }
  }

  // 监听PageView页面切换，更新索引
  void onPageChanged(int index) {
    currentPageIndex.value = index;
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }
}

修改后的OnBoardingButton代码 #

class OnBoardingButton extends StatelessWidget {
  const OnBoardingButton({super.key});

  @override
  Widget build(BuildContext context) {
    final dark = MHelperFunctions.isDarkMode(context);
    // 获取Controller实例
    final controller = Get.find<OnBoardingController>();

    return Positioned(
      bottom: MDeviceUtils.getBottomNavBarHeight(),
      right: MSizes.lg,
      child: ElevatedButton(
        onPressed: () => controller.nextPage(),
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.fromLTRB(12, 8, 12, 8),
          backgroundColor: dark ? MColors.white : MColors.primary,
        ),
        // 用Obx包裹，监听索引变化自动更新UI
        child: Obx(() => Row(
          children: [
            Text(
              controller.currentPageIndex.value == 2 ? 'Get Started' : 'Next',
              style: TextStyle(
                color: dark ? MColors.primary : MColors.light,
                fontSize: MSizes.fontSizeSm,
              ),
            ),
            SizedBox(width: MSizes.xs),
            Icon(
              Icons.arrow_forward_ios_rounded,
              size: MSizes.iconSm,
              color: dark ? MColors.primary : MColors.light,
            ),
          ],
        )),
      ),
    );
  }
}

PageView页面绑定示例 #

class OnBoardingScreen extends StatelessWidget {
  const OnBoardingScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // 初始化Controller
    final controller = Get.put(OnBoardingController());

    return Scaffold(
      body: PageView(
        controller: controller.pageController,
        onPageChanged: controller.onPageChanged,
        children: const [
          // 替换为你的引导页组件
          OnBoardingPage1(),
          OnBoardingPage2(),
          OnBoardingPage3(),
        ],
      ),
      floatingActionButton: const OnBoardingButton(),
    );
  }
}

内容的提问来源于stack exchange，提问作者Phil Dubem