Flutter关于GetX中可观察变量的详解

最近使用Flutter开发项目，看了一些网博客文章和B站上关于Getx的解说，都特么的太垃圾了。下面是简单的例子，可以很好地理解可观察变量的一些基础性概念。

一、可观察变量的声明和赋值，对应地刷新界面的几种方式

<code>main(){
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const GetMaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //初始化CountController实例，这样才能使用其中的变量
    CountController controller = Get.put(CountController());

    // 无需继承GetxController，只是一个普通类。
    // 成员变量sun由于依赖了可观察变量，所以sun发生改变界面也会刷新
    CountController2 controller2 = CountController2();

    return Scaffold(
      appBar: AppBar(
        title: const Text(&quot;123&quot;),
        centerTitle: true,
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: (){
          //controller.count.value++;
          controller.getCount();
          controller2.getSun();
        },
        child: const Icon(Icons.add),
      ),
    body: Obx(() =&gt;
        Center(
            child: Column(
              children: [
                //count1和count2各自独立，其中一个发生变化，另一个不会改变
                Text(&quot;count1---${controller.count1.value}&quot;),
                Text(&quot;count2---${controller.count2.value}&quot;),

                //因为sun依赖count1和count2，所以sun发生变化也会刷新界面。
                Text(&quot;count3---${controller2.sun}&quot;),
              ],
            )
        )
    )

      //   第二种方式
      //   body: GetX&lt;CountController&gt;(
      //      //init: controller,
      //      builder: (controller){
      //        return Center(child: Text(&quot;${controller.count.value}&quot;));
      //      },
      //   ),

            //第三种方式
        // body: GetBuilder&lt;CountController&gt;(
        //    init: CountController(), //可以在这初始化
        //    builder: (controller){
        //      return Center(child: Text(&quot;${controller.count1.value}&quot;,style: const TextStyle(fontSize: 25,fontWeight: FontWeight.bold)));
        //    },
        // )
    );
  }
}

class CountController extends GetxController{
  //声明变量(可观察的变量)第一种方式
  //var count = RxInt(0);

  //声明变量(可观察的变量)第二种方式
  //var count = Rx&lt;int&gt;(0);

  //声明变量(可观察的变量)第三种方式
  var count1 = 0.obs;
  var count2 = 0.obs;

  void getCount(){
     count1.value++;
     //count2.value++;

     //如果使用第一、第二种声明方式可以省略以下的update() 方法
     update();
   }
}</code>

测试普通的类中，实例变量依赖可观察变量，界面是否会刷新，答：会刷新。

<code>class CountController2 {
  //寻找已经存在的实例
  CountController controller = Get.find&lt;CountController&gt;();
  var sun = 0;

  void getSun(){
    sun = controller.count1.value + controller.count2.value;
  }
}</code>

二、如果多个可观察的变量在同一个方法里，但是我只需要改变跟count1x相关的界面刷新，其它不刷新。这是需要在update()方法中填写id参数。然后使用GetBuilder()刷新界面。

<code>main(){
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const GetMaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    CountController controller = Get.put(CountController());
    return Scaffold(
      appBar: AppBar(
        title: const Text(&quot;改变某一个值，对应的界面更新&quot;),
        centerTitle: true,
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: (){
          //改变动作
          controller.getCount1();
        },
        child: const Icon(Icons.add),
      ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            //crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              GetBuilder&lt;CountController&gt;(
                id:&#039;count1&#039;,
                builder:(controller){
                  return Text(
                      &quot;count1的值---${controller.count1.value}&quot;,
                      style: const TextStyle(fontSize: 25,fontWeight: FontWeight.bold));
                } ,
              ),
              const SizedBox(height: 10),
              GetBuilder&lt;CountController&gt;(
                id:&#039;count2&#039;,
                builder:(controller){
                  return Text(
                      &quot;count2的值---${controller.count2.value}&quot;,
                      style: const TextStyle(fontSize: 25,fontWeight: FontWeight.bold));
                } ,
              ),
            ],
          ),
        )
    );
  }
}

class CountController extends GetxController{

  var count1 = 0.obs;
  var count2 = 0.obs;

  void getCount1(){
     count1.value++;
     count2.value++;
     //参数里填写需要需要改变的id
     update([&#039;count1&#039;]);
   }
}</code>

结果是只有cout1界面的数字刷新了，count2界面没有刷新。