Flutter GetX解析

快速掌握Getx 状态管理

• [ x] 十分钟掌握 GetX

---

学习内容：

1. 创建Flutter 项目
2. 引入GetX 依赖
3. GetX 代码风格初探
4. 效果展示

---

创建项目：

使用Idea 安装Flutter 插件，创建项目

创建项目，自动打开，后续引入Getx 的依赖，注意GetX 的依赖是
get: ^4.6.6

---

编写代码：

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


void main() => runApp(GetMaterialApp(home: Home()));

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder(child: Text("Home"),);
  }
}

注意：

这并不能修改Flutter的MaterialApp，GetMaterialApp并不是修改后的MaterialApp，它只是一个预先配置的Widget，它的子组件是默认的MaterialApp。你可以手动配置，但绝对没有必要。GetMaterialApp会创建路由，注入它们，注入翻译，注入你需要的一切路由导航。如果你只用Get来进行状态管理或依赖管理，就没有必要使用GetMaterialApp。GetMaterialApp对于路由、snackbar、国际化、bottomSheet、对话框以及与路由相关的高级apis和没有上下文（context）的情况下是必要的。
建议直接使用GetMaterialApp ，后面更方便

安装Getx 插件

呵呵 这个插件的作者名称有点萌，大牛人
使用插件
右键lib 选择Getx

这样会自动生成目录

写代码走起

counter_logic.dart

import 'package:get/get.dart';

class CounterLogic extends GetxController {
  // 使用.obs 这个精简的语法糖，Getx 会将这个count变量声明为响应式状态变量，可以在页面使用
  var count=0.obs;

  increment()=>count++;
}

创建你的业务逻辑类，并将所有的变量，方法和控制器放在里面。 你可以使用一个简单的".obs "使任何变量成为可观察的.

注意

从上面的代码可以看到Dart 代码风格，可以自动推断，increment 的function 都不需要写，6666

counter_view.dart

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

import '../other_view.dart';
import 'counter_logic.dart';

class CounterPage extends StatelessWidget {
  CounterPage({super.key});

  final logic = Get.put(CounterLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用Obx(()=>每当改变计数时，就更新Text()。
        appBar: AppBar(title: Obx(() => Text("Clicks: ${logic.count}"))),

        // 用一个简单的Get.to()即可代替Navigator.push那8行，无需上下文！
        body: Center(child: ElevatedButton(
            child: const Text("Go to Other"), onPressed: () => Get.to(Other()))),
        floatingActionButton:
        FloatingActionButton(child: Icon(Icons.add), onPressed: logic.increment));
  }
}

这里显示的在不同的页面共享状态例子，有了Getx 可以不用Stateful Widget，简化了Flutter 的代码
，降低了学习的难度
自己写一个另外页面

other_view.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_counter/counter/counter_logic.dart';

class Other extends StatelessWidget {
  // 你可以让Get找到一个正在被其他页面使用的Controller，并将它返回给你。
  final CounterLogic c = Get.find();

  @override
  Widget build(context){
    // 访问更新后的计数变量
    return Scaffold(body: Center(child: Text("${c.count}")));
  }
}

可以清晰看到，另外的页面要想获取状态，需要通过 Get.get().由于这里使用Getx 自动根据变更声明，找到真正的Controller ，非常类似Java Spring中依赖注入：BeanFactory.getBean(xxxx.class),使用Dart 直接Get.get()就可以注入自己想要的Controller ，更加丝滑，杠杠滴

main.dart

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

import 'counter/counter_view.dart';


void main() => runApp(GetMaterialApp(home: CounterPage()));

整个代码

跑起来

Getx Counter

总结

本文章为GetX学习系列文章的第一篇，快速建立影响，大家尽量手敲，找到使用Getx的感觉。总体看来GetX 快速极大提高Flutter 的开发效率