其他分享
首页 > 其他分享> > Flutter GetX使用---简洁的魅力！，阿里技术专家深入讲解

Flutter GetX使用---简洁的魅力！，阿里技术专家深入讲解

作者：互联网

  *   直接使用Get.to，可释放

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => XxxxPage()),
);

解决方案

这边我模拟了上面场景，写了一个解决方案

Navigator.push(
    Get.context,
    MaterialPageRoute(builder: (context) => AutoDisposePage()),
); 

class AutoDisposePage extends StatefulWidget {
  @override
  _AutoDisposePageState createState() => _AutoDisposePageState();
}

class _AutoDisposePageState extends State<AutoDisposePage> {
  final AutoDisposeLogic logic = Get.put(AutoDisposeLogic());

  @override
  Widget build(BuildContext context) {
    return BaseScaffold(
      appBar: AppBar(title: const Text('计数器-自动释放')),
      body: Center(
        child: Obx(
          () => Text('点击了 ${logic.count.value} 次',
              style: TextStyle(fontSize: 30.0)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.increase(),
        child: const Icon(Icons.add),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<AutoDisposeLogic>();
    super.dispose();
  }
}

class AutoDisposeLogic extends GetxController {
  var count = 0.obs;

  ///自增
  void increase() => ++count;
}

看到这，你可能会想，啊这！怎么这么麻烦，我怎么还要写StatefulWidget，好麻烦！

各位放心，这个问题，我也想到了，我特地在插件里面加上了自动回收的功能

image-20210428153424135

来看下代码，default模式一样可以的

class AutoDisposePage extends StatefulWidget {
  @override
  _AutoDisposePageState createState() => _AutoDisposePageState();
}

class _AutoDisposePageState extends State<AutoDisposePage> {
  final AutoDisposeLogic logic = Get.put(AutoDisposeLogic());

  @override
    Widget build(BuildContext context) {
      return Container();
    }

  @override
  void dispose() {
    Get.delete<AutoDisposeLogic>();
    super.dispose();
  }
} 

class AutoDisposeLogic extends GetxController {

}

好了，接下来，进入正文吧！

计数器

效果图

)

counter_getx

实现

首页，当然是实现一个简单的计数器，来看GetX怎么将逻辑层和界面层解耦的

image-20210126175019383

来看下生成的默认代码，默认代码十分简单，详细解释放在俩种状态管理里

import 'package:get/get.dart';

class CounterGetLogic extends GetxController {

} 

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

import 'logic.dart';

class CounterGetPage extends StatelessWidget {
  final CounterGetLogic logic = Get.put(CounterGetLogic());

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

响应式状态管理

当数据源变化时，将自动执行刷新组件的方法

class CounterGetLogic extends GetxController {
  var count = 0.obs;

  ///自增
  void increase() => ++count;
} 

// model
// 我们将使整个类成为可观察的，而不是每个属性。
class User{
    User({this.name = '', this.age = 0});
    String name;
    int age;
}

// controller
final user = User().obs;
//当你需要更新user变量时。
user.update( (user) { // 这个参数是你要更新的类本身。
    user.name = 'Jonny';
    user.age = 18;
});
// 更新user变量的另一种方式。
user(User(name: 'João', age: 35));

// view
Obx(()=> Text("Name ${user.value.name}: Age: ${user.value.age}"));
// 你也可以不使用.value来访问模型值。
user().name; // 注意是user变量，而不是类变量（首字母是小写的）。

简单状态管理

GetBuilder：这是一个极其轻巧的状态管理器，占用资源极少！

class CounterEasyGetLogic extends GetxController {
  var count = 0;

  void increase() {
    ++count;
    update();
  }
} 

class CounterEasyGetPage extends StatelessWidget {
  final CounterEasyGetLogic logic = Get.put(CounterEasyGetLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('计数器-简单式')),
      body: Center(
        child: GetBuilder<CounterEasyGetLogic>(
          builder: (logicGet) => Text(
            '点击了 ${logicGet.count} 次',
            style: TextStyle(fontSize: 30.0),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.increase(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

总结

分析

使用场景

跨页面交互

跨页面交互，在复杂的场景中，是非常重要的功能，来看看GetX怎么实现跨页面事件交互的

效果图

)

jump_getx

实现

页面一

常规代码

class JumpOneLogic extends GetxController {
  var count = 0.obs;

  ///跳转到跨页面
  void toJumpTwo() {
    Get.toNamed(RouteConfig.jumpTwo, arguments: {'msg': '我是上个页面传递过来的数据'});
  }

  ///跳转到跨页面
  void increase() => count++;
} 

class JumpOnePage extends StatelessWidget {
  /// 使用Get.put()实例化你的类，使其对当下的所有子路由可用。
  final JumpOneLogic logic = Get.put(JumpOneLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('跨页面-One')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.toJumpTwo(),
        child: const Icon(Icons.arrow_forward_outlined),
      ),
      body: Center(
        child: Obx(
          () => Text('跨页面-Two点击了 ${logic.count.value} 次',
              style: TextStyle(fontSize: 30.0)),
        ),
      ),
    );
  }
}

页面二

这个页面就是重点了

class JumpTwoLogic extends GetxController {
  var count = 0.obs;
  var msg = ''.obs;

  @override
  void onReady() {
    var map = Get.arguments;
    msg.value = map['msg'];

    super.onReady();
  }

  ///跳转到跨页面
  void increase() => count++;
} 

class JumpTwoPage extends StatelessWidget {
  final JumpOneLogic oneLogic = Get.find();
  final JumpTwoLogic twoLogic = Get.put(JumpTwoLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('跨页面-Two')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          oneLogic.increase();
          twoLogic.increase();
        },
        child: const Icon(Icons.add),
      ),
      body: Center(
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          //计数显示
          Obx(
            () => Text('跨页面-Two点击了 ${twoLogic.count.value} 次',
                style: TextStyle(fontSize: 30.0)),
          ),

          //传递数据
          Obx(
            () => Text('传递的数据：${twoLogic.msg.value}',
                style: TextStyle(fontSize: 30.0)),
          ),
        ]),
      ),
    );
  }
}

总结

GetX这种的跨页面交互事件，真的是非常简单了，侵入性也非常的低，不需要在主入口配置什么，在复杂的业务场景下，这样简单的跨页面交互方式，就能实现很多事了

进阶吧！计数器

我们可能会遇到过很多复杂的业务场景，在复杂的业务场景下，单单某个模块关于变量的初始化操作可能就非常多，在这个时候，如果还将state（状态层）和logic（逻辑层）写在一起，维护起来可能看的比较晕，这里将状态层和逻辑层进行一个拆分，这样在稍微大一点的项目里使用GetX，也能保证结构足够清晰了！

在这里就继续用计数器举例吧！

实现

此处需要划分三个结构了：state（状态层），logic（逻辑层），view（界面层）

image-20210127093925934

来看下生成的模板代码

class CounterHighGetState {
  CounterHighGetState() {
    ///Initialize variables
  }
} 

import 'package:get/get.dart';

import 'state.dart';

class CounterHighGetLogic extends GetxController {
  final state = CounterHighGetState();
} 

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

import 'logic.dart';
import 'state.dart';

class CounterHighGetPage extends StatelessWidget {
  final CounterHighGetLogic logic = Get.put(CounterHighGetLogic());
  final CounterHighGetState state = Get.find<CounterHighGetLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

为什么写成这样三个模块，需要把State单独提出来，请速速浏览下方

改造

)

class CounterHighGetState {
  RxInt count;

  CounterHighGetState() {
    count = 0.obs;
  }
} 

class CounterHighGetLogic extends GetxController {
  final state = CounterHighGetState();

  ///自增
  void increase() => ++state.count;
} 

class CounterHighGetPage extends StatelessWidget {
  final CounterHighGetLogic logic = Get.put(CounterHighGetLogic());
  final CounterHighGetState state = Get.find<CounterHighGetLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('计数器-响应式')),
      body: Center(
        child: Obx(
              () => Text('点击了 ${state.count.value} 次',
              style: TextStyle(fontSize: 30.0)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.increase(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

对比

看了上面的改造，屏幕前的你可能想吐槽了：坑比啊，之前简简单单的逻辑层，被拆成俩个，还搞得这么麻烦，你是猴子请来的逗比吗？

大家先别急着吐槽，当业务过于复杂，state层，也是会维护很多东西的，让我们看看下面的一个小栗子，下面实例代码是不能直接运行的，想看详细运行代码，请查看项目：[flutter_use](

)

最后

文章所有资料全部已经打包整理好，另外小编手头上整理了大量Android架构师全套学习资料，Android核心高级技术PDF文档+全套高级学习资料+视频+2021 BAT 大厂面试真题解析

**[CodeChina开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》](

)**

资料展示：

image

image

image

image

本文已被腾讯CODING开源托管项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录，自学资源及系列文章持续更新中…
这么麻烦，你是猴子请来的逗比吗？

大家先别急着吐槽，当业务过于复杂，state层，也是会维护很多东西的，让我们看看下面的一个小栗子，下面实例代码是不能直接运行的，想看详细运行代码，请查看项目：[flutter_use](

)

最后

文章所有资料全部已经打包整理好，另外小编手头上整理了大量Android架构师全套学习资料，Android核心高级技术PDF文档+全套高级学习资料+视频+2021 BAT 大厂面试真题解析

**[CodeChina开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》](

)**

资料展示：

[外链图片转存中…(img-V6YMmA1l-1631249894194)]

[外链图片转存中…(img-rBr6hXXb-1631249894195)]

[外链图片转存中…(img-JGDw7gWA-1631249894196)]

[外链图片转存中…(img-NyP0h2UL-1631249894197)]

本文已被腾讯CODING开源托管项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录，自学资源及系列文章持续更新中…

标签：count,GetX,Get,Flutter,---,extends,logic,class,页面
来源： https://blog.csdn.net/m0_61072670/article/details/120219825