下面是一个完整的 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});

  @override
  Widget 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});

  @override
  Widget 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});

  @override
  Widget 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});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp( // 注意：必须用 GetMaterialApp
      home: 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 的语法更简洁，适合中小型项目快速开发。