GetX GetBuilder 教程：一步一步构建响应式UI

最新推荐文章于 2025-06-20 17:08:27 发布
最新推荐文章于 2025-06-20 17:08:27 发布
阅读量468 收藏 3
点赞数 5
CC 4.0 BY-SA版权
文章标签： ui javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/codau/article/details/147553937

引言

在 Flutter 开发中，状态管理是构建高质量应用的关键挑战之一。GetX 是一个轻量级且强大的解决方案，提供了简单而高效的状态管理机制。本教程将深入探讨 GetX 中的 GetBuilder，这是一个用于构建响应式 UI 的强大工具。通过本教程，您将掌握如何使用 GetBuilder 创建动态、响应式的用户界面。

GetX 简介

GetX 是一个专为 Flutter 设计的轻量级解决方案，结合了高性能状态管理、智能依赖注入和路由管理功能。它旨在简化 Flutter 应用的开发流程，使开发者能够专注于业务逻辑的实现，而无需过多关注底层实现细节。

GetX 的核心优势包括：

  • 简化的 API 设计，减少样板代码
  • 高性能的状态管理
  • 智能的依赖注入机制
  • 简化的路由管理
  • 支持响应式编程

GetBuilder 概述

GetBuilder 是 GetX 提供的一个核心组件，用于处理状态管理并简化 UI 的更新过程。它是一个能够监听控制器（Controller）状态变化并相应地重建 UI 的小部件（Widget）。

GetBuilder 的主要作用是结合 GetxController 实现界面数据的更新。当调用 GetxController 中的方法更改状态时，GetBuilder 会自动检测这些变化并更新 UI，从而实现响应式设计。

GetBuilder 的基本使用

第一步：添加依赖

首先，在您的 Flutter 项目中添加 GetX 依赖。在 pubspec.yaml 文件中添加以下内容：

yaml

复制

dependencies:
  get: ^4.7.2

然后运行 flutter pub get 安装依赖。

第二步：创建控制器

创建一个控制器类，继承自 GetxController。这个控制器将包含应用程序的状态和逻辑。

dart

复制

import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs; // 使用 obs 方法将变量标记为可观察的

  void increment() {
    count.value++;
  }
}

第三步：在 UI 中使用 GetBuilder

在您的 UI 小部件中使用 GetBuilder 来监听控制器的变化。

dart

复制

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

class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GetBuilder 示例'),
      ),
      body: Center(
        child: GetBuilder<CounterController>(
          init: CounterController(), // 初始化控制器
          builder: (controller) { // 构建器函数，接收控制器作为参数
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text('你按了按钮的次数：'),
                Text(
                  '${controller.count.value}',
                  style: const TextStyle(
                    fontSize: 40,
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    controller.increment(); // 调用控制器的方法
                  },
                  child: const Text('增加'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

第四步：运行应用

运行您的 Flutter 应用，您应该会看到一个显示计数器的界面，每次点击按钮时计数器会增加。

GetBuilder 的高级用法

延迟构建

有时，您可能希望在某些条件满足后再构建 UI。GetBuilder 提供了 condition 参数来实现这一点。

dart

复制

GetBuilder<CounterController>(
  init: CounterController(),
  condition: (value) => value.count.value > 5, // 只有当计数器大于5时才构建 UI
  builder: (controller) {
    return Text('计数器已经超过5：${controller.count.value}');
  },
)

使用 future

如果您需要在 UI 构建前执行异步操作，可以使用 future 参数。

dart

复制

GetBuilder<CounterController>(
  init: CounterController(),
  future: Future.delayed(Duration(seconds: 2)), // 2秒后构建 UI
  builder: (controller) {
    return Text('延迟构建的文本：${controller.count.value}');
  },
)

更新方法

GetBuilder 提供了多种更新方法，控制 UI 如何响应状态变化：

  1. 默认更新：每次状态变化时都更新整个 UI。
  2. 部分更新：只更新 UI 的一部分。
  3. 条件更新：根据条件决定是否更新 UI。

dart

复制

// 部分更新示例
GetBuilder<CounterController>(
  init: CounterController(),
  builder: (controller) {
    return Column(
      children: [
        Text('计数器：${controller.count.value}'),
        // 使用 GetBuilder 嵌套实现部分更新
        GetBuilder<CounterController>(
          init: CounterController(),
          builder: (controller) {
            return Text('倍增计数器：${controller.count.value * 2}');
          },
        ),
      ],
    );
  },
)

GetBuilder 与依赖注入

GetX 的依赖注入功能可以与 GetBuilder 结合使用，以实现更灵活的应用架构。

第一步：创建绑定

创建一个绑定类，定义如何创建和释放控制器实例。

dart

复制

import 'package:get/get.dart';

class CounterBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<CounterController>(() => CounterController()); // 懒加载控制器
  }
}

第二步：在路由中使用绑定

在 GetX 的路由配置中使用绑定。

dart

复制

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => MyView(),
          bindings: [CounterBinding()], // 使用绑定
        ),
      ],
    ),
  );
}

第三步：在 UI 中使用 GetBuilder

在 UI 中使用 GetBuilder 时，可以不指定 init 参数，因为控制器已经通过绑定创建。

dart

复制

class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GetBuilder 示例'),
      ),
      body: Center(
        child: GetBuilder<CounterController>(
          builder: (controller) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text('你按了按钮的次数：'),
                Text(
                  '${controller.count.value}',
                  style: const TextStyle(
                    fontSize: 40,
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    controller.increment();
                  },
                  child: const Text('增加'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

GetBuilder 与导航

GetBuilder 可以与 GetX 的导航功能结合使用，实现更复杂的路由和状态管理。

第一步：配置路由

在 GetX 的路由配置中定义各个页面及其绑定。

dart

复制

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => HomeView(),
          bindings: [HomeBinding()],
        ),
        GetPage(
          name: '/details',
          page: () => DetailsView(),
          bindings: [DetailsBinding()],
        ),
      ],
    ),
  );
}

第二步：在控制器中实现导航逻辑

在控制器中实现导航逻辑。

dart

复制

import 'package:get/get.dart';

class HomeController extends GetxController {
  void navigateToDetails() {
    Get.toNamed('/details'); // 使用 Get.toNamed 进行导航
  }
}

第三步：在 UI 中使用 GetBuilder

在 UI 中使用 GetBuilder 来监听控制器的变化并实现导航。

dart

复制

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('主页'),
      ),
      body: Center(
        child: GetBuilder<HomeController>(
          init: HomeController(),
          builder: (controller) {
            return ElevatedButton(
              onPressed: () {
                controller.navigateToDetails(); // 调用控制器中的导航方法
              },
              child: const Text('跳转到详情页'),
            );
          },
        ),
      ),
    );
  }
}

GetBuilder 的性能优化

使用 key

为 GetBuilder 提供一个唯一的 key，可以避免不必要的重建。

dart

复制

GetBuilder<CounterController>(
  key: UniqueKey(), // 使用唯一键
  init: CounterController(),
  builder: (controller) {
    return Text('${controller.count.value}');
  },
)

使用 condition

使用 condition 参数来控制是否构建 UI。

dart

复制

GetBuilder<CounterController>(
  init: CounterController(),
  condition: (value) => value.count.value % 2 == 0, // 只有当计数器为偶数时才构建 UI
  builder: (controller) {
    return Text('偶数计数器：${controller.count.value}');
  },
)

使用 future 和 loading

使用 future 和 loading 参数来处理异步操作。

dart

复制

GetBuilder<CounterController>(
  init: CounterController(),
  future: Future.delayed(Duration(seconds: 2)),
  loading: () => CircularProgressIndicator(), // 加载时显示进度条
  builder: (controller) {
    return Text('延迟构建的文本：${controller.count.value}');
  },
)

GetBuilder 的最佳实践

使用 Rx 类型

使用 Rx 类型来简化状态管理。

dart

复制

import 'package:get/get.dart';

class CounterController extends GetxController {
  RxInt count = 0.obs; // 使用 RxInt 替代 int

  void increment() {
    count.value++;
  }
}

使用 obx

使用 obx 函数来简化 GetBuilder 的使用。

dart

复制

class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GetBuilder 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('你按了按钮的次数：'),
            Obx(() { // 使用 obx 函数
              return Text(
                '${Get.find<CounterController>().count.value}',
                style: const TextStyle(
                  fontSize: 40,
                ),
              );
            }),
            ElevatedButton(
              onPressed: () {
                Get.find<CounterController>().increment();
              },
              child: const Text('增加'),
            ),
          ],
        ),
      ),
    );
  }
}

使用 GetX 小部件

使用 GetX 小部件来简化状态管理。

dart

复制

class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GetBuilder 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('你按了按钮的次数：'),
            GetX<CounterController>( // 使用 GetX 小部件
              builder: (controller) {
                return Text(
                  '${controller.count.value}',
                  style: const TextStyle(
                    fontSize: 40,
                  ),
                );
              },
            ),
            ElevatedButton(
              onPressed: () {
                Get.find<CounterController>().increment();
              },
              child: const Text('增加'),
            ),
          ],
        ),
      ),
    );
  }
}

结论

GetBuilder 是 GetX 提供的一个强大工具，用于构建响应式 UI。通过合理使用 GetBuilder，您可以简化状态管理，提高应用的性能和可维护性。本教程详细介绍了 GetBuilder 的基本使用、高级用法、与依赖注入和导航的结合，以及性能优化和最佳实践。希望这些内容能够帮助您更好地使用 GetBuilder 构建高质量的 Flutter 应用。

参考资料

[1] Flutter Getx 路由管理- 鲤斌 - 博客园. https://www.cnblogs.com/xbinbin/p/17959659.

[2] Flutter 全能型选手GetX —— 路由管理get.tonamed-优快云博客. https://blog.youkuaiyun.com/hjjdehao/article/details/126270895.

[3] 二、Flutter必学！Getx路由管理本章的学习目标是 - 稀土掘金. https://juejin.cn/post/7227486312340095033.

[4] 【Flutter】getx 路由的使用getx跳转并关闭 - 优快云博客. https://blog.youkuaiyun.com/weixin42108319/article/details/129240092.

[5] get | Flutter package. https://pub.dev/packages/get.

[6] Flutter GetX状态管理之路由管理（一） - 稀土掘金. https://juejin.cn/post/6949558189721387021.

【开源项目，天呐
m0_61331407的博客
09-08 474
| 首页 | 体系 | 导航 | | | | | | :-: | :-: | :-: | | 项目 | 我的 | 登录 | ????你能学到 ================================================================= 轻松上手小程序系列 网络框架的封装 定时器的使用 页面参数传递 banner轮图 列表渲染 下拉刷新、上拉加载 view的显示与隐藏 随机九宫格 tab标签页的写法 搜索功能 转发功能
深入浅出 GetX：超详细实用指南，全方位掌握 Flutter 开发利器第一篇之路由管理篇
我叫柱子哥
03-16 8609
正如Get官方介绍，GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。GetX 有3个基本原则：性能： GetX 专注于性能和最小资源消耗。效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。结构： GetX 可以将界面、逻辑、依赖和路由之间低耦合,逻辑更清晰，代码更容易维护。这篇文章主要是介绍下GetX的用法。
getx用法详细解析以及注意事项
最新发布
liao277218962的专栏
06-20 375
Flutter GetX框架提供了三种状态管理方式：响应式（Rx+Obx）、简单状态（GetBuilder）和混合监听（Worker）。响应式方式通过.obs变量和Obx自动刷新UI，适合实时数据变化；简单状态需手动调用update()刷新，性能更高；Worker用于状态变化时的副作用处理。Obx仅监听内部使用的.obs变量而非全部，且不绑定特定Controller，可灵活组合多个Controller的状态。开发者可根据项目需求选择合适方式，快速开发推荐响应式，高性能场景适用GetBuilder，副作用处理
GetX、GetBuilder 和 Obx底层原理
yaoSir的博客
03-19 1382
GetX、GetBuilder 和 Obx 在底层实现上使用了不同的机制，分别基于反射、InheritedWidget 和 Stream 来实现状态管理和响应式更新。它订阅了被观察对象（通常是 Rx 类型的变量），当这些对象的值发生变化时，Obx 会收到通知并触发 Widget 的重建。它使用了 Dart 的反射功能来监听变量的变化，并在变化时通知相关的 Widget 进行更新。GetX、GetBuilder 和 Obx 在底层都使用了不同的机制来实现状态管理和响应式更新。
Flutter中GetBuilder 和 GetX 的区别
weixin_41119184的博客
12-09 631
这和原生android中LiveData使用有很大的相似性，其中update方法的作用仅仅只是通页面进行更新，并不是只更新increment方法中提到的count，若MyController 存在其他已变更的值，也会一同在页面上更新，如下例所示。当我们先点击一次Test按键时，time的值已经变更为1，但由于页面未更新，页面上time显示的值仍为0，此时我们点击Increment按钮，会发现页面上time和count同时变更为1了。当响应式变量（使用 .obs 标记）发生变化时，会自动触发 UI 的重建。
深入浅出 GetX：超详细实用指南，全方位掌握 Flutter 开发利器第三篇之路由依赖管理篇
我叫柱子哥
07-19 3742
今天这篇博客主要介绍Getx的三大功能之一的依赖管理。依赖管理是软件开发中的一个关键部分，尤其是在复杂应用中。它帮助开发者管理应用中的各种依赖，确保依赖的实例化和生命周期管理变得更加简单和高效。GetX 提供了一种简单且高效的依赖注入方式，通过少量代码即可实现依赖的注入、管理和访问。它主要通过Get.put、Get.lazyPut、Get.putAsync和Get.create等方法来实现依赖管理。
Flutter GetX框架使用
weixin_41984570的博客
05-26 1641
当原生应用启动时，预先初始化Flutter引擎，这样当用户跳转到Flutter页面时，引擎已经就绪，页面加载更快。调用 Get.put()、Get.lazyPut()、Get.putAsync()、Get.create() 会创建一个新的依赖项，然后将它注册到依赖管理容器中。当一个路由从Stack中移除时，所有与它相关的控制器、变量和对象的实例都会从内存中移除。1）创建一个类并实现Binding，重写 "dependencies"方法，然后插入你要在该路由上使用的所有类。的主要功能是简化控制器的获取。
Getx状态管理指南：构建Flutter应用程序
这些建议的学习资源将帮助开发者深入理解Flutter的工作原理、学会构建用户界面、掌握生命周期管理、了解响应式编程等关键概念。 此外，文档中提到了“盖茨”，这可能是指一个名词错误或者是一个特定的资源或人物的...
使用 Flutter 和 GetX 构建网上购物应用教程
GetX是一个具有依赖注入的响应式状态管理器；而Obx是基于观察者模式的状态管理器，可以观察数据变化并自动更新UI。 教程中提到了一些特殊的表情符号符号，如：backhand_index_pointing_down，这是一种表示手势的...
深入解析 Flutter GetX
风起云涌
02-18 1244
是 Flutter 中一个轻量级且功能强大的状态管理、路由管理和依赖注入框架。它以简单、快速、高效著称，适合从小型到大型项目的开发需求。，通过一个框架解决状态管理、路由管理和依赖注入的问题。
Flutter项目架构实践：Getx与底部导航动态更新UI
在Getx中，Obx是一个响应式的观察者，它可以监听状态的变化，并在数据变化时自动重建界面。当使用getX方法获取状态时，Obx能够感知到数据变化并触发界面更新，这比传统的setState方法更为高效。这种方法可以大大减少...
GetX在使用过程中一些问题
我叫柱子哥
10-31 1129
在 GetX 中，使用 Get 提供的功能可以极大简化应用状态管理、路由导航和依赖注入，但也可能会带来一些副作用。了解这些潜在副作用可以帮助开发者在使用 GetX 时规避潜在问题，编写更健壮的代码。
Flutter状态管理--GetX的简单使用
建古的编码生活
06-26 4652
一、前言 Flutter开发，就需要对各种状态的管理，就是在请求数据的时候需要实时变化，各种交互变化等，在没有使用GetX之前使用Provider,用Provider的时候觉得真香，挺方便的，需要刷新的时候直接 notifyListeners(); 用了GetX之后觉得Provider太繁琐了。这边介绍下GetX的使用以及常用的方法。 二、 GetX GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。 1、相关优势： 1、轻量，可以模块单独编译，没
Flutter状态管理--Getx学习2，31道Android面试题
ccc6553584的博客
03-29 936
我见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了5、6年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。不断奔跑，你就知道学习的意义所在！！
getX和getRawX、getY和getRawY?
小NIU
12-24 676
getX、getY:x，y是相对于控件本身左上点的相对位置； getRawX、getRawY:rawx，rawy是相对于屏幕的位置。
flutter 获取何时使用 GetX＜Controller＞、GetBuilder＜Controller＞ 或 Obx()
u013297881的专栏
09-02 4489
Obx when my controller isalready registeredelsewhere and I want minimal code/noise a reactive widget GetX when my controllerisn'tyet registered or I want to be very explicit/obvious which controller is being used or I need to run someinitStatec...
flutter getx 简单使用教程
shelutai的博客
06-13 3009
所以Flutter使用GetX真的很不错为什么说什么GetX好用呢？ 1、依赖注入 GetX是通过依赖注入的方式，存储相应的XxxGetxController；已经脱离了InheritedWidget那一套玩法，自己手动去管理这些实例，使用场景被大大拓展 2、跨页面交互 这绝对是GetX的一个优点！对于复杂的生产环境，跨页面交互的场景，实在太常见了，GetX的跨页面交互，实现的也较为优雅 3、路由管理 GetX内部实现了路由管理，而且用起来，非常简单。 （bloc没实现路由管理，fluro的路由管理使用非常
Flutter：getX的学习
weixin_41897680的博客
08-30 2297
Flutter：getX的学习
2025年Getx教程_Flutter+Getx系列实战教程介绍
yuanlaile的博客
04-17 964
Getx教程_Flutter+Getx系列实战教程介绍，GetX的学习曲线较陡峭，对于初学者来说可能会有一定的难度，但它在Flutter开发中是一个非常有用的工具。如果你对状态管理、依赖注入和路由管理等方面有较高的要求，那么学习GetX是很有必要的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值