Flutter - GetX

最新推荐文章于 2025-06-20 17:08:27 发布

阿凡斓

最新推荐文章于 2025-06-20 17:08:27 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：文科生也编程文章标签： flutter

本文链接：https://blog.youkuaiyun.com/qq_46681008/article/details/115840936

本文介绍了Flutter中轻量级框架GetX的使用，包括响应式控件Obx、GetX、GetxController与GetBuilder，以及如何构建可伸缩应用的步骤，如Bindings和GetView。通过示例展示了如何实现状态管理、视图更新和路由跳转，帮助开发者理解GetX在状态管理和页面间通信中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文科生也编程 - GetX的简单使用

GetX是Flutter的轻便而强大的解决方案，它结合了高性能状态管理，智能依赖注入和快速实用的路由管理。

更新时间：4.18

一、响应式控件

（一）Obx

关键词：StatelessWidget、.obs、Obx()

[ 例：一个加法按钮 —— 使用.obs变量和Obx对象构建响应式控件 ]

下面这个例子，是基于可观察的变量和控件Obx构建的一个简单视图，点击按钮可以改变页面中的数字；

该例子表明GetX框架可在页面未进行setState()刷新的情况下，实现由build方法构建的控件的状态更新。

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

// ignore: must_be_immutable
class GetXPage extends StatelessWidget {
  var count = 0.obs;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Obx(() => Text("$count"))
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count++,
        child: Icon(Icons.add),
      ),
    );
  }
}

如果没有使用GetX框架（即变量count无后缀.obs 或Text没有包含在控件Obx中），则点击按钮+，屏幕中的数字不会增加；这是由于，方法build仅执行了一次，onPressed所引起的 count值的变化并没有进入控件Text，因而屏幕中的数字显示不会变化。

[ 编写步骤 ]

使用StatelessWidget创建Widget对象；
声明一个"可观察变量"count，在其后缀.obs，此变量将使用于控件Obx中；
使用 控件Obx() 包裹包含变量count的控件Text() ，常用格式为Obx( () => 目标更新状态的控件 )；

注：使用动态类型的可观察变量无法用于有类型要求的构造传参；

（二）GetX

关键词：.obs、GetX()

[ 例：使用别人家的按钮(一) —— 基于可观察变量的视图-逻辑分离 ]

使用GetX框架可以加载并使用非当前类的控制器来更新当前视图控件的状态，实现视图与逻辑的分离；

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

class Controller {
  var count = 0.obs;

  void increment() {
    count++;
  }
}

class TestGetX extends StatelessWidget {
  final controller = Controller();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(170),
            child: GetX(builder: (_) => Text('clicks: ${controller.count}')),
          ),
          FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () => controller.increment(),
          ),
        ],
      ),
    );
  }
}

通过导包本身即能够在他类构造实例以访问类中的变量和方法；但如果没有使用GetX框架，方法increment所引起的 count的值变化，将无法传递更新到控件，实现视图状态刷新；除了构造实例创建控制器外，该例子的实现还需要将相应变量声明为 “可观察的” 。

[ 编写步骤 ]

1、在控制器中定义 可观察变量 ；

定义业务逻辑类Controller；
变量count将保存需要更新的数据，因而后缀".obs "；
方法increment能够引起变量count的值变化；
变量count的"可观察"特性，意味着当其值发生变化，变量能够自动响应并更新值变化；

2、将包含可观察变量的视图控件作为控件GetX 的子控件；

创建视图页面：使用StatelessWidget；
构建响应控件：将目标更新状态或显示变化的控件传入控件GetX的属性builder中；

3、使用控制器更新变量的值，观察视图控件的状态响应和变化；

创建动作控件：在FloatingActionButton的onPressed属性中设置更新触发
每次点击将执行一次controller的方法increment；
当count发生变化时，由builder构建的显示变量count的控件状态将响应更新；

注：使用控件GetX的前提是，声明变量可观察，并非定义继承GetxController及使用Get.put进行注入；

（三）GetxController & GetBuilder

关键词：GetxController、update、Get.put()、GetBuilder()

[ 例：使用别人家的按钮(二) —— 使用GetBuilder构建视图-逻辑分离的响应式控件 ]

使用GetBuilder实现响应控件与使用GetX的差别在于：后者基于变量可观察，而前者则通过加载指定控制器来更新控件状态；

import 'package:get/get.dart';

class Controller extends GetxController {
  var count = 0;

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

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

class TestGetBuilder extends StatelessWidget {
  final controller = Get.put(Controller());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(170.0),
            child: GetBuilder<Controller>(
                builder: (_) => Text(
                      'clicks: ${controller.count}',
                    )),
          ),
          FloatingActionButton(
            c