Flutter-Getx-简单的分离结构用法(GetBuilder是配合update使用)

要求:

1.配置版本 get: ^4.6.6
2.AndroidStudio 配置插件GetX

3.右键使用插件创建文件夹Mine目录,自动生成logic.dart、state.dart和view.dart 三个文件

main.dart代码修改

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
import 'package:listdemo/Mine/view.dart';


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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    ///将原来默认的MaterialApp 修改为 GetMaterialApp
    return GetMaterialApp(
      title: 'Flutter Demo',
      getPages: [
        GetPage(name: "/mine", page: () => MinePage())
      ],
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: MinePage(),

    );
  }

}

Mine -> logic.dart

import 'package:get/get.dart';
import 'state.dart';

class MineLogic extends GetxController {
  final MineState state = MineState();

  ///修改年龄
  void changeText (){
    state.age = 188;
    print("点击触发了方法");
    update();
  }
}

Mine -> state.dart

import 'package:get/get.dart';

///状态管理 相当于mvc的model层,专门用来管理数据
class MineState {

  ///定义一个变量
  var age = 0 ;

  MineState() {
    ///Initialize variables
  }
}

Mine -> view.dart

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

/*
1.Get.put：这个方法是立即创建并注册一个对象。它会立即创建对象并将其注册到GetxController服务中，
以便可以在整个应用程序中通过Get.find获取该对象的实例。这意味着对象的创建和注册是立即执行的。

2.Get.find：这个方法用于获取先前通过Get.put或Get.lazyPut方法注册的对象实例。
它根据类型或标识符查找并返回已注册的对象。在需要获取对象实例的地方，您可以使用Get.find方法。

3.Get.lazyPut：这个方法与Get.put类似，但是对象的实例不是立即创建的。相反，它会在第一次调用Get.find时才创建并注册对象。
这对于那些在应用程序的特定部分中可能不会被使用到的对象是有用的，可以延迟对象的创建和初始化。
* */
class MinePage extends StatelessWidget {
  MinePage({Key? key}) : super(key: key);

  ///逻辑
  final logic = Get.put(MineLogic());
  ///数据
  final state = Get.find<MineLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GetBuilder<MineLogic>(
            builder: (logic) => Text("当前的年龄是${logic.state.age}"),
          ),
          /// 使用Obx包装Text小部件，当age变化时自动更新
          ElevatedButton(
            onPressed: () {
              ///点击时候开始触发操作
              // logic.changeText();
              Get.find<MineLogic>().changeText();
            },
            child: Text("请点击"),
          )
        ],
      ),
    );
  }
}

运行效果

点击按钮后效果