Flutter中GetX系列一--(Obx响应式状态管理,共享数据)

定义Obx变量的三种方式

// 第一种 使用 Rx{Type}
// final name = RxString('');
// final isLogged = RxBool(false);
// final count = RxInt(0);
// final balance = RxDouble(0.0);
// final items = RxList<String>([]);
// final myMap = RxMap<String, int>({});

// 第二种是使用 Rx，规定泛型 Rx<Type>。
// final name = Rx<String>('');
// final isLogged = Rx<Bool>(false);
// final count = Rx<Int>(0);
// final balance = Rx<Double>(0.0);
// final number = Rx<Num>(0)
// final items = Rx<List<String>>([]);
// final myMap = Rx<Map<String, int>>({});
// 自定义类 - 可以是任何类
// final user = Rx<User>();

// 第三种更实用、更简单、更可取的方法，只需添加 .obs 作为value的属性。
// final name = ''.obs;
// final isLogged = false.obs;
// final count = 0.obs;
// final balance = 0.0.obs;
// final number = 0.obs;
// final items = <String>[].obs;
// final myMap = <String, int>{}.obs;
// 自定义类 - 可以是任何类
// final user = User().obs;

1.案例一:

第一步：应用程序入口设置

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/ObxCountExample/ObxCountExample.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//注意：这不会修改Flutter的MaterialApp，GetMaterialApp不是修改后的MaterialApp，它只是一个预配置的小部件，它作为子部件具有默认的MaterialApp。您可以手动配置，但绝对没有必要。GetMaterialApp将创建路由，注入它们，注入翻译，注入路由导航所需的一切。如果您仅将Get用于状态管理或依赖项管理，则无需使用GetMaterialApp。GetMaterialApp对于与路线和上下文缺失相关的路由、小吃店、国际化、底表、对话框和高级API是必需的。
    return GetMaterialApp(
      title: "GetX",
      home: ObxCountExample(),
    );
  }
}

第二步：声明Rx变量以及改变计数器的方法

//RxInt count = RxInt(0);
// var count = Rx<double>(0);
//声明的变量后面跟.obs,在使用Obx函数才可以监听到该属性值得变化
 var count = 0.obs;

void increment() {
  count++;
}

第三步：使用Obx监听值的改变

Obx(() => Text(
  "count的值为: $count",
  style: TextStyle(color: Colors.red, fontSize: 30),
)),

完整代码

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ObxCountExample extends StatelessWidget {
  RxInt count = RxInt(0);
  // var count = Rx<double>(0);
  // var count = 0.obs;

  void increment() {
    count++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Obx---计数器"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() => Text(
              "count的值为: $count",
              style: TextStyle(color: Colors.red, fontSize: 30),
            )),
            SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                increment();
              },
              child: Text("点我加1"))
          ],
        ),
      ),
    );
  }
}

2.自定义类实现案例:

第一步：先自定义一个类

import 'package:flutter/material.dart';
import 'package:get/get.dart';

// ignore: camel_case_types

 //必须继承GetxController
class numberVC extends GetxController {
 
 //声明的变量后面必须跟.obs.当它变化的时候,使用Obx才能够监听到.
  var count = 0.obs;
  increment() => count++;
}

第二步：应用程序入口设置

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'numberVC.dart';

void main() {
  runApp(GetMaterialApp(
    home: HomeVC(),
  ));
}

第三步：使用Obx监听值的改变

//在使用getx的时候,当页面的值需要变动的时候可以直接使用StatelessWidget(无状态组件),没有必要使用StatefulWidget(有状态组件).
class HomeVC extends StatelessWidget {
  const HomeVC({super.key});

  @override
  Widget build(BuildContext context) {
    //获取到自定义属性的那个VC(获取到numberVC类的实例)
    final controller = Get.put(numberVC());
    return Scaffold(
      appBar: AppBar(title: Text("getX")),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Get.to(OtherVC());
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
            //这里必须使用Obx函数进行包裹,获取到的属性改变的时候,这里才会及时做出响应
            child: Obx(() {
              return Text(
                "数字:${controller.count.toString()}",
                style: TextStyle(
                  fontSize: 50,
                  color: Colors.orange,
                ),
              );
            }),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //对数字进行加1处理.
          controller.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

第四步(附加)：可以将当前页面使用的属性值传递到下一个页面

class OtherVC extends StatelessWidget {

//你可以让Get找到一个正在被其他页面使用的numberVC,并将它返回会给你
  final numberVC VC = Get.find();
  @override
  Widget build(BuildContext context) {
    //访问更新后的计数变量
    return Scaffold(
      appBar: AppBar(title: Text("下一级页面")),
      body: Center(
        child: Text("上一个页面的传值${VC.count}"),
      ),
    );
  }
}