1. Toy模板网首页
  2. > Toy博客

Flutter 状态管理之GetX库

9月前 作者：初学者-Study 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了Flutter 状态管理之GetX库。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

  Flutter使用的是声明式UI，是通过状态去更新UI组件的，因此我们首先就要学习状态的使用。同样为了简化原本的状态使用，我们会使用Getx库。

正文

  之前说要写Flutter，一拖就是一年多，有些不好意思。现在都24年了，终于等到你，下面还是按照我们最属于的思路来吧。

一、创建项目

首先我们创建项目，Flie → New → New Flutter Project...

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

然后选择Flutter，这里可以看到Flutter SDK path，已经配置好了，点击Next。

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

然后输入工程名为study_state，目前我们只考虑Android和iOS两个平台，因此其他的就不勾选了。

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

点击Create按钮，完成项目的创建。

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

  创建后我们可以看到main.dart，这里是flutter启动文件，同时我启动了一个模拟器，用的雷电模拟器，至于为什么不用AS自带的模拟器，只能说懂的都懂，不懂的也劝你别去用。

  下面我们首先运行在模拟器上看看，运行到模拟器的时间会比较长，不过运行之后当你再次修改代码之后可以通过热重载直接在模拟器上显示出修改后的内容，快捷键是Ctrl + S，图标是一个黄色的闪电。有时候快捷键不生效则你可以手动的点击这个闪电按钮，如果也不生效就重新安装，总会生效的，做开发就要有一颗平常心。

运行好了，效果如下图所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

  当我们点击右下角的浮动按钮之后就会看到屏幕中的数字加1，关于这个里面的内容我在第一篇Flutter文章中就介绍过了，因此下面我们就不过多介绍代码，我们将main.dart中的代码全部清空，如下图所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

然后我们再来一步一步的写代码，在这个过程中我们能了解到更多的东西。

二、状态组件

首先我们写一个main函数，代码如下所示：

void main() {

}

然后我们在这个当前这个文件中再写一个MyApp类，如下图所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

  这里我继承了StatelessWidget，这是一个无状态组件，在你输入之后会有提示，注意一下导包是material.dart中的，推荐你使用这个里面的StatelessWidget，MyApp的代码如下所示：

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

  这里重新里面的build()函数，在这里面我们就可以写UI了，但是我们先不写，你可以把MyApp理解为Android的Application，然后我们再写一个HomePage，继承StatefulWidget 这是一个有状态的组件，重写里面的createState()，代码我们也先不改，你可以把HomePage 理解为Activity。

class HomePage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    throw UnimplementedError();
  }
}

  然后我们再写一个_HomePageState 类，继承自State，这是一个抽象类，支持有状态组件，那么我们传递HomePage进去，代码如下所示：

class _HomePageState extends State<HomePage> {
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

  这里面的build()函数中我们同样可以设置UI，现在我们就了解了无状态和有状态两种组件，在 Flutter 中，有两种类型的小部件：StatelessWidget 和 StatefulWidget。它们在功能和使用上有一些区别。

  1. StatelessWidget（无状态小部件）：

    • 它是一个不可变的小部件，意味着一旦创建就不能再更改它的状态。
    • 它的属性（props）在创建时被设置，并且在整个生命周期中保持不变。
    • 当父级小部件发生更改时，StatelessWidget 将重新构建，但状态不会发生变化。
    • 由于不需要跟踪状态的改变，StatelessWidget 的构建过程更加高效。

  2. StatefulWidget（有状态小部件）：

    • 它是一个可变的小部件，可以在运行时改变其内部状态。
    • 它具有一个持久的状态对象（State），用于存储和跟踪小部件的变化。
    • 当父级小部件发生更改时，StatefulWidget 通过更新关联的状态对象来重新构建。
    • StatefulWidget 通常用于处理需要响应用户交互或动态变化的情况。

在实践中，以下是一些使用场景的示例：

  • 使用 StatelessWidget：当小部件的外观和内容不会随时间而改变时，推荐使用 StatelessWidget，例如静态文本、图标等。
  • 使用 StatefulWidget：当小部件的外观和内容需要根据用户交互、数据变化或其他条件动态更新时，需要使用 StatefulWidget，例如表单、列表视图等。

  需要注意的是，StatefulWidget 与 State 对象一起工作，后者存储和管理小部件的状态。当使用 StatefulWidget 时，通常需要同时创建一个与之关联的状态类。

  总结起来，StatelessWidget 是一个不可变的小部件，适用于静态内容，而 StatefulWidget 是一个可变的小部件，适用于需要跟踪状态变化的场景。

下面我们将前面所写的代码给串起来，首先是main函数中，修改后代码如下所示：

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

  这里使用了一个runApp()函数，里面传入一个组件即可，无论是什么组件，这里我们传入MyApp()，那么当我们启动之后会运行main函数，然后渲染MyApp()组件，下面我们修改MyApp的代码，如下所示：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Study State",
      theme: ThemeData(useMaterial3: true),
      home: HomePage(),
    );
  }
}

  这里我们通过构建MaterialApp()，在home属性中添加了HomePage()，那么内容就以HomePage()为主了，再看HomePage ，代码如下所示：

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

  @override
  State<HomePage> createState() {
    return _HomePageState();
  }
}

  这里面的key是一个标识HomePage组件的唯一键，createState()方法在创建HomePage时会被调用。createState()方法返回一个_HomePageState对象，它是HomePage的具体状态类。状态类(State)的主要作用是管理StatefulWidget的状态，并根据需要更新小部件的UI。每当HomePage的状态发生变化时，Flutter会调用_HomePageState类中的build方法来构建最新的UI，下面我们再来看_HomePageState，代码如下所示：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.center,
        child: Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          child: Column(
            children: [
              Text("Study State"),
              ElevatedButton(onPressed: () {
                print("点击了");
              }, child: Text("按钮"))
            ],
          ),
        ),
      ),
    );
  }
}

  这里首先使用了一个Scaffold()，这是一个页面的构成组件，body属性定义了页面的主要内容区域。在body中，使用Align组件将其子组件在父容器中居中显示。Alignment.center表示子组件在父容器中的居中对齐。

  Align的子组件是一个Container，设置宽度和高度（200x200）。alignment属性设置为Alignment.center，将子组件在自身容器中进行居中对齐。child属性是一个Column组件，这是一个纵向布局组件，里面是一个数组，可以包含多个组件，它包含了两个子小部件：一个Text组件和一个带有文本的ElevatedButton组件。在按钮的点击事件中我们打印一下日志，下面我们重新运行一下。

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

点击按钮后，看控制台。

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

三、状态更新UI

  下面我们通过状态来更新UI，比如我们将点击按钮将文本内容改成大写，再点击改成小写，下面我们修改_HomePageState类中的代码，如下所示：

class _HomePageState extends State<HomePage> {
  String test = "study state";
  bool isUppercase = false;

  void changeText() {
    setState(() {
      isUppercase = !isUppercase;
      print(isUppercase ? "大写" : "小写");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.center,
        child: Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          child: Column(
            children: [
              Text(isUppercase ? test.toUpperCase() : test.toLowerCase()),
              ElevatedButton(onPressed: () {
                changeText();
              }, child: const Text("按钮"))
            ],
          ),
        ),
      ),
    );
  }
}

  首先我们定义了两个变量，内容和是否大小写，然后写了一个changeText()函数，这个函数中使用了setState(() {})，用于改变状态，在这里面修改了isUppercase 的值，然后Text(isUppercase ? test.toUpperCase() : test.toLowerCase())这行代码，在初始情况下显示为小写，然后我们点击按钮调用changeText()函数，函数中更改isUppercase 的值，通过setState就会刷新UI，此时isUppercase 为true，则Text中显示大写，再点击一下为false就变成小写。这就是状态改变驱动UI。

主要改动地方如下图所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

控制台日志如下图所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

  通过这种方式当我们有数据改变时就可以更新UI了，只不过刚开始你需要习惯这种方式。声明式UI基本上都是这种方式，了解了Flutter基本的状态更新UI，下面我们再来学习一下GetX这个库。

四、GetX库

  GetX是一个基于Flutter的状态管理和路由导航的解决方案，提供了简单、强大、高性能的工具和功能，以简化Flutter应用程序的开发过程。地址是：GetX，可以去了解一下，下面我们来使用它。

① 添加依赖

在项目的pubspec.yaml文件中，将GetX添加为依赖项：

dependencies:
  get:

添加位置如下图所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

这里后面我并没有写版本号，这表示获取最新的版本，如需获取指定版本，写法如下所示：

dependencies:
  get: ^4.3.8

然后点击Pub get，获取并安装GetX库，如下图所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

  你也可以在Terminal命令行中输入flutter pub get命令，获取并安装GetX库。安装成功后你可以在控制台看到，如下图所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

GetX安装成功，同时我们知道最新的版本是4.6.6。

② 局部刷新

  在使用之前我们先将原有的代码分离一下，也就是将Application和Activity分开，在lib下创建一个home文件夹，文件夹下新建一个home_page.dart文件，然后我们将main.dart中的部分代码挪到这里面，代码如下所示：

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  String test = "study state";
  bool isUppercase = false;

  void changeText() {
    setState(() {
      isUppercase = !isUppercase;
      print(isUppercase ? "大写" : "小写");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.center,
        child: Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          child: Column(
            children: [
              Text(isUppercase ? test.toUpperCase() : test.toLowerCase()),
              ElevatedButton(onPressed: () {
                changeText();
              }, child: const Text("按钮"))
            ],
          ),
        ),
      ),
    );
  }
}

然后我们再看main.dart中的代码：

import 'package:flutter/material.dart';

import 'home/home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Study State",
      theme: ThemeData(useMaterial3: true),
      home: HomePage(),
    );
  }
}

  现在我们就进行了分离，下面就可以在home_page.dart中进行GetX的使用了，注意在使用的时候需要导包，在哪里用就在哪里导包，然后编辑器也会提示你导包的。

import 'package:get/get.dart';

修改代码如下所示：

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

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

  RxString test = "study state".obs;
  RxBool isUppercase = false.obs;

  void changeText() {
    isUppercase.value = !isUppercase.value;
    if (isUppercase.value) {
      test.value = test.value.toUpperCase();
    } else {
      test.value = test.value.toLowerCase();
    }
    print(isUppercase.value ? "大写" : "小写");
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Align(
        alignment: Alignment.center,
        child: Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          child: Column(
            children: [
              Obx(() => Text(test.value)),
              ElevatedButton(onPressed: () {
                changeText();
              }, child: const Text("按钮"))
            ],
          ),
        ),
      ),
    );
  }
}

  这里我们说明一下，在首先使用GetX之后，我将HomePage所继承的组件由StatefulWidget改成了StatelessWidget，然后为变量添加了.obs后缀，使这个变量可观察。然后在changeText()方法中修改可观察变量的值。最后使用Obx包裹需要局部刷新的组件，例如：Obx(() => Text(test.value))，当可观察变量值更新时，Obx包裹中的内容就会进行刷新。

  现在这种模式我们还可以再改一下，将涉及到数据改变的部分剥离出去，让我们的页面只专注于显示和更新即可，在home目录下新建一个home_controller.dart文件，里面的代码如下：

import 'package:get/get.dart';

///Home页面控制器
class HomeController extends GetxController {
  RxString test = "study state".obs;
  RxBool isUppercase = false.obs;

  void changeText() {
    isUppercase.value = !isUppercase.value;
    if (isUppercase.value) {
      test.value = test.value.toUpperCase();
    } else {
      test.value = test.value.toLowerCase();
    }
    print(isUppercase.value ? "大写" : "小写");
  }
}

  这里就是创建一个HomeController类，继承自GetX的GetxController，注意导包别导错了，然后将changeText()方法挪过来即可，下面我们再会到home_page.dart中，修改代码如下所示：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:study_state/home/home_controller.dart';

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

  @override
  Widget build(BuildContext context) {

    final HomeController homeController = Get.put(HomeController());

    return Scaffold(
      body: Align(
        alignment: Alignment.center,
        child: Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          child: Column(
            children: [
              Obx(() => Text(homeController.test.value)),
              ElevatedButton(onPressed: () {
                homeController.changeText();
              }, child: const Text("按钮"))
            ],
          ),
        ),
      ),
    );
  }
}

  在build()方法中通过Get.put(HomeController())，得到控制器对象，然后在Text中通过控制器得到里面的值，同样可以调用里面的方法，这样我们就将业务和UI分离了。你现在运行之后效果是和之前一样的，可以试试呢。

③ 全局刷新

  全局刷新我们需要使用到GetBuilder，实际上他就是setState的优化，下面我们改动一下home_controller中的代码，如下所示：

import 'package:get/get.dart';

///Home页面控制器
class HomeController extends GetxController {
  String test = "study state";
  bool isUppercase = false;
  String btnText = "大写";

  void changeText() {
    isUppercase = !isUppercase;
    if (isUppercase) {
      test = test.toUpperCase();
      btnText = "小写";
    } else {
      test = test.toLowerCase();
      btnText = "大写";
    }
    update();
  }
}

  这里就将.obs后缀去掉了，就不是一个可观察变量了，同时我增加了一个参数，用于显示按钮的文字，在changeText()方法中进行修改，最后调用update()进行全局更新，注意update()方法是结合GetBuilder使用的，下面我们改写home_page中的代码，如下所示：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:study_state/home/home_controller.dart';

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

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: GetBuilder<HomeController>(
          init: HomeController(),
          builder: (controller) {
        return Align(
          alignment: Alignment.center,
          child: Container(
            width: 200,
            height: 200,
            alignment: Alignment.center,
            child: Column(
              children: [
                Text(controller.test),
                ElevatedButton(
                    onPressed: controller.changeText,
                    child: Text(controller.btnText))
              ],
            ),
          ),
        );
      }),
    );
  }
}

  使用GetBuilder包裹构建一个可以全局刷新的组件，在初始化时得到HomeController()，然后在builder中就可以返回一个组件，组件中直接使用controller对象进行参数和方法的使用。

效果图如下所示：

Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理
Flutter 状态管理之GetX库,Flutter,flutter,GetX,状态管理,响应式状态管理

五、源码

源码地址：study_state文章来源地址https://www.toymoban.com/news/detail-817302.html

到了这里，关于Flutter 状态管理之GetX库的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Flutter GetX使用

    下载地址： https://pub-web.flutter-io.cn/packages/get 导入依赖： 导入头文件： 创建全局数据 Counter ，继承 GetxController ： 添加依赖： 添加组件 Obx() ，监听显示数据： 改变数据： 创建全局数据 MyController 继承 GetxController ： 添加依赖： 添加组件 GetBuilderT : 在添加的依赖是全局的，考

    2024年02月16日
    浏览(34)

  • Flutter GetX使用详解

    GetX是一款功能强大且轻量级的Flutter状态管理和路由管理库。它提供了一种简单而强大的方式来构建Flutter应用程序，无需大量的模板代码。GetX不仅提供了状态管理和路由管理，还包括其他实用工具，如国际化和依赖注入。 在本文中，我们将深入探讨GetX的核心功能，并通过实

    2024年02月08日
    浏览(37)
  • Flutter GetX的使用

    Flutter GetX的使用

    比较强大的状态管理框架 引入库： 实现一个计数器功能 代码如下： 1.状态管理 Get 有两种不同的状态管理器：简单状态管理器（我们称之为 GetBuilder）和反应式状态管理器（GetX/Obx） 使用 Get 进行响应式编程与使用 setState 一样简单。 要使其可观察，您只需在其末尾添加“.

    2024年02月05日
    浏览(40)

  • flutter getx 简单使用教程

    所以Flutter使用GetX真的很不错 为什么说什么GetX好用呢？ 1、依赖注入 GetX是通过依赖注入的方式，存储相应的XxxGetxController；已经脱离了InheritedWidget那一套玩法，自己手动去管理这些实例，使用场景被大大拓展 2、跨页面交互 这绝对是GetX的一个优点！对于复杂的生产环境，跨

    2024年02月08日
    浏览(53)

  • 【Flutter】Flutter 状态管理 Provider 包使用概述

    🎉想要精通 Flutter，掌握更多技巧和最佳实践？好消息来了！👉 Flutter专栏-Flutter Developer 101 入门小册 正在等你！📚 🔍这里有你需要的所有 Flutter 学习资源，包括代码示例和深度解析。🎯 ⏰专栏内容持续更新，价格也会随之上涨。现在加入，享受最优惠的价格！💰 🚀现

    2024年02月09日
    浏览(39)

  • Flutter GetX 之 国际化

    今天给大家介绍一下 GetX 的国际化功能，在日常开发过程中，我们经常会使用到国际化功能，需要们的应用支持 国际化，例如我们需要支持 简体、繁体、英文等等。 上几篇文章介绍了GetX的 路由管理 和 状态管理，看到大家的点赞和收藏，还是很开心的，说明这两篇文章给大

    2024年01月19日
    浏览(58)

  • 对Flutter GetX的一些理解

    1.内部实现了 路由管理 ，相比目前主流的fluro框架更轻量，并且路由跳转无需上下文对象，支持自定义路由中间件和动态路由传参等功能。 2.提供两种简单灵活的实现状态管理的方式。 3.它内部实现了依赖注入，可以快速的获取到某个状态管理器( GetxController )。 4.在实际开发

    2023年04月08日
    浏览(32)

  • Flutter笔记：Flutter的应用生命周期状态（lifecycleState）管理

    Flutter笔记 Flutter的应用生命周期状态（lifecycleState）管理 作者 ： 李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263 邮箱 ： 291148484@163.com 本文地址 ：https://blog.csdn.net/qq_28550263/article/details/134127670 【介绍】： WidgetsBinding.instance 是Flutter中用于管理应用程序事件和生命周期的重要工具

    2024年02月06日
    浏览(42)

  • Flutter GetX 实现 ChatGPT 简单聊天界面

    Flutter 是一款跨平台的移动应用开发框架，而 GetX 是 Flutter 中一种简单易用的状态管理和路由管理工具。本篇我们将使用 Flutter 和 GetX 实现一个简单的聊天界面，以与 ChatGPT 进行交互。 我们需要在 Flutter 项目中引入 GetX 库。在 pubspec.yaml 文件中添加以下依赖： 在 main 函数中添

    2023年04月17日
    浏览(81)
  • flutter getx nested navigation 嵌套路由

    flutter getx nested navigation 嵌套路由

    https://youtu.be/SXER4JVBFps 嵌套路由可以用在如购物确认向导界面切换。 使用 getx 实现嵌套路由，需要如下步骤： 通过 Navigator 组件的 key 属性 用 Get.nestedKey(1) 进行标记 onGenerateRoute 决定去哪个视图界面 initialRoute 初始路由 通过 Get.toNamed 的 id 属性执行嵌套路由 第一步：准备工作

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包