GetX例子:在一个组件里更新状态，在另一个组件里获取更新的数据

下面是一个完整的 GetX 示例，演示如何在一个组件中更新状态，并在另一个组件中获取更新后的数据。我们将使用 GetX 的状态管理工具（GetxController + Obx/GetBuilder）。

---

1. 定义 Controller

首先，创建一个 GetxController 来管理状态。

counter_controller.dart

import 'package:get/get.dart';class CounterController extends GetxController {// 使用 Rx 包裹的响应式变量RxInt count = 0.obs;// 更新状态的方法void increment() {count.value++;}
}

---

2. 在 WidgetA 中更新状态

创建一个按钮组件，点击时调用 increment() 更新状态。

widget_a.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'counter_controller.dart';class WidgetA extends StatelessWidget {final CounterController controller = Get.put(CounterController());WidgetA({super.key});@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: () {// 调用 Controller 的方法更新状态controller.increment();},child: const Text('Increment Counter'),);}
}

---

3. 在 WidgetB 中获取状态

另一个组件监听 count 的变化，并实时显示最新值。这里提供两种方式：

方式 1：使用 Obx（响应式更新）

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'counter_controller.dart';class WidgetB extends StatelessWidget {WidgetB({super.key});@overrideWidget build(BuildContext context) {final CounterController controller = Get.find<CounterController>();return Obx(() => Text('Current Count: ${controller.count.value}',style: Theme.of(context).textTheme.headlineMedium,),);}
}

方式 2：使用 GetBuilder（局部更新）

class WidgetB extends StatelessWidget {WidgetB({super.key});@overrideWidget build(BuildContext context) {return GetBuilder<CounterController>(builder: (controller) {return Text('Current Count: ${controller.count.value}',style: Theme.of(context).textTheme.headlineMedium,);},);}
}

---

4. 整合到主页面

将两个组件放在同一个页面中测试。

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'widget_a.dart';
import 'widget_b.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return GetMaterialApp( // 注意：必须用 GetMaterialApphome: Scaffold(appBar: AppBar(title: const Text('GetX Example')),body: const Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [WidgetB(), // 显示状态SizedBox(height: 20),WidgetA(), // 更新状态],),),),);}
}

---

效果

• 点击 WidgetA 的按钮时，CounterController 中的 count 会递增。
• WidgetB 会自动刷新并显示最新的计数器值。

---

关键点说明

1. Get.put() vs Get.find()：

   • Get.put()：注册 Controller（通常在首次使用时调用）。
   • Get.find()：获取已注册的 Controller（无需重复创建）。

2. 响应式 vs 非响应式：

   • Obx：监听 .obs 变量，变化时自动刷新（需配合 Rx 类型）。
   • GetBuilder：手动调用 update() 时刷新（适合非响应式变量）。

3. GetMaterialApp：

   • 必须使用 GetMaterialApp 替代 MaterialApp，这是 GetX 的根上下文。

---

补充：如何手动触发更新？

如果在 CounterController 中不使用 .obs，可以通过 update() 方法通知界面刷新：

class CounterController extends GetxController {int count = 0;void increment() {count++;update(); // 通知 GetBuilder 刷新}
}

此时 WidgetB 必须使用 GetBuilder 才能生效。

---

通过这个例子，你可以清晰看到 GetX 的状态更新和跨组件共享状态的流程。GetX 的语法更简洁，适合中小型项目快速开发。