Flutter和Getx:如何将参数从UI传递到Getx控制器？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

Flutter 状态管理之GetX库

Flutter 状态管理之GetX 前言正文一、创建项目二、状态组件三、状态更新UI 四、GetX库 ① 添加依赖 ② 局部刷新 ③ 全局刷新五、源码前言 Flutter使用的是声明式UI...声明式UI基本上都是这种方式，了解了Flutter基本的状态更新UI，下面我们再来学习一下GetX这个库。...四、GetX库 GetX是一个基于Flutter的状态管理和路由导航的解决方案，提供了简单、强大、高性能的工具和功能，以简化Flutter应用程序的开发过程。...，然后在Text中通过控制器得到里面的值，同样可以调用里面的方法，这样我们就将业务和UI分离了。...} } 使用GetBuilder包裹构建一个可以全局刷新的组件，在初始化时得到HomeController()，然后在builder中就可以返回一个组件，组件中直接使用controller对象进行参数和方法的使用

3.1K0 1

Flutter 系列之GetX的学习(1) --> 状态管理

介绍 GetX 是 Flutter 的超轻量级强大解决方案。它快速、实用地结合了高性能状态管理、智能依赖注入和路由管理。状态管理: GetX 的旗舰功能之一是其直观的状态管理功能。...依赖管理: GetX 提供了一种智能方法来管理 Flutter 应用程序中的依赖项，例如视图控制器。GetX 将从内存中删除任何当前未使用的控制器。...依赖注入（Dependency Injection，简称 DI）是 GetX 提供的一项功能，用于将控制器（如 CounterController）注入到视图层，使得它们可以在不同的地方方便地被获取和使用...GetBuilder有一个属性 "initState"，就像StatefulWidget一样，你可以从你的控制器中调用事件，直接从控制器中调用，不需要再在你的initState中放置事件。...Get是全知全能的，在大多数情况下，它很清楚地知道从内存中取出一个控制器的时机，你不需要担心什么时候移除一个控制器，Get知道最佳的时机。

9131 0

您找到你想要的搜索结果了吗？

是的

没有找到

Flutter 系列之GetX的学习(2) --> 路由导航

前言在上篇文章我们介绍一下getx的概念, 以及如何使用Getx创建我们的Controller控制器,,并且在UI部分进行控制器的实例化,使用GetBuilder进行状态的展示和更新....userId 参数 Get.toNamed('/profile/123'); 获取路由参数 // 获取动态路由参数 var userId = Get.parameters['userId']; 6...路由传参支持通过 arguments 传递复杂的对象或数据。...在跳转时，可以传递参数: 不限于字符串，一个Map，一个List，甚至一个类的实例 Get.to(SecondPage(), arguments: {'id': 123}); 在目标页面可以通过 Get.arguments... 获取这些参数： var id = Get.arguments['id']; 也可以通过动态网页链接进行传递,就像web开发一样.

8851 0

Flutter之GetX依赖注入使用详解

前面用两篇文章介绍了 GetX 的使用和通过源码剖析了 GetX 依赖注入实现原理，了解 GetX 依赖注入原理后，本篇文章将通过不同的注入方法和参数设置详细介绍 GetX 依赖注入的使用。...put 为了验证依赖注入的功能，首先创建两个测试页面：PageA 和 PageB ，PageA 添加两个按钮 toB 和 find ，分别为跳转 PageB 和获取依赖；在 PageB 中通过 put...from memory /// page a find error E/flutter (31878): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled...from memory /// page a find error E/flutter (31878): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled.../ui/ui_dart_state.cc(209)] Unhandled Exception: "User" not found.

2.1K3 1

Flutter GetX使用---简洁的魅力！

实现了动态路由传参，也就是说直接在命名路由上拼参数，然后能拿到这些拼在路由上的参数，也就是说用flutter写H5，直接能通过Url传值，OMG！...为什么其数据传递和路由设计思想对立？为什么getx使用依赖注入？getx的obx自动刷新黑魔法是个什么鬼？...logic：先来看看logic层因为是处理页面逻辑的，加上Controller单词过长，也防止和Flutter自带的一些控件控制器弄混，所以该层用logic结尾，这里就定为了logic层当然这点随个人意向...，各位可以自行复制到项目中使用 GetBindWidget 该控件可以回收单个GetXController（bind参数），可以加上对应tag（tag参数）；也可以回收多个GetXController（...PageView切换到某个页面的时候，才会调用对应Page页面的build方法；对于PageView页面，控制器的注入过程，不能写在类中了，需要将其移入到build方法中初始化。

9.1K10 3

Flutter之GetX集成及使用详解

本文将从零开始手把手教你如何集成 GetX 搭建属于你的 Flutter 应用框架。...0.GetX 集成添加依赖在 pubspec.yaml 文件中添加 GetX 的依赖，如下： dependencies: flutter: sdk: flutter get: ^4.5.1...，GetX 提供了普通路由和别名路由。...使用 arguments 方式可以传递任意类型的参数。...device=phone&id=354&name=Enzo"); 接收参数：通过 arguments 进行传参，在下个页面接收参数直接使用 Get.arguments 获取到传递过来的参数： dynamic

11.4K4 5

Flutter Getx状态管理源码解析

GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。本文来解析下Getx是怎样实现的状态管理。老规矩上Counter Demo。...到这里我们大概能猜知道Getx的刷新实际是利用StatefulWidget setState的实现。接下来我们接着探索Getx是如何将count状态与ObxWidget关联起来的。...方法作为参数传递。...实际上observer是RxInterface的子类，后面会分析到。接着调用builder() build我们传过来的widget。接着判断observer是否canUpdate。...addListener(subject);这里就是将当前Rx对象的subject传递给ObxWidget的_observer。

1.5K1 0

《深入浅出Dart》状态管理

状态管理的目标是确保应用程序的不同部分能够共享和响应相同的数据，并保持数据的一致性和更新。在Dart和Flutter中，有多种状态管理方案可供选择，以满足不同规模和复杂度的应用程序需求。...setState方法允许你在StatefulWidget中更新状态并触发UI的重建。...GetX GetX是一个功能丰富的状态管理库，它提供了状态管理、路由导航、依赖注入和其他实用工具。它通过使用"GetBuilder"和"Obx"等组件来订阅和响应状态的变化。...通过学习和实践，你将能够更熟练地应用状态管理，构建出高质量的Dart和Flutter应用程序。...参考资料要深入了解Dart语言和Flutter中的状态管理，可以参考以下官方资源和文档： Flutter状态管理介绍 Provider官方文档 Riverpod官方文档 GetX官方文档 BLoC官方文档

5891 0

Flutter中值得收藏的几个包

img 2.path_provider：^2.0.10 用于查找文件系统上常用位置的 Flutter 插件。支持安卓、iOS、Linux、macOS 和 Windows。并非所有平台都支持所有方法。...7.getx img GetX 是 Flutter 的一个超轻且强大的解决方案。它结合了高性能状态管理、智能依赖注入和快速实用的路由管理。 GetX 有 3 个基本原则。...性能：GetX 专注于性能和最小的资源消耗。GetX 不使用 Streams 或 ChangeNotifier。生产力：GetX 使用简单而愉快的语法。...无论您想做什么，GetX 总有一种更简单的方法。它将节省开发时间，并提供您的应用程序可以提供的最大性能。通常，开发人员应该关注从内存中删除控制器。...对于 GetX，这不是必需的，因为默认情况下不使用资源时会从内存中删除它们。如果你想把它保存在内存中，你必须在你的依赖中明确声明“permanent: true”。

1.8K3 1

Flutter快速开发——列表分页加载封装

• View：界面 UI 元素，即 Widget 。...[2]：依赖管理、状态管理列表分页加载封装中 GetX 主要使用到了依赖管理和状态管理，当然 GetX 除了依赖管理还有很多其他功能，因本篇文章主要介绍列表分页的封装，不会过多介绍 GetX，关于...GetX 更多使用及介绍可参考以下文章： • Flutter之GetX集成及使用详解 • Flutter 通过源码一步一步剖析 Getx 依赖管理的实现 • Flutter之GetX依赖注入使用详解...itemBuilder 方法，后者参数与 ListView 的参数有区别，传入的是 item 数据和下标 index，且使用 GestureDetector 包裹封装了 item 点击事件调用onItemClick...[2] GetX: https://pub.dev/packages/get [3] flutter_pulltorefresh: https://github.com/peng8350/flutter_pulltorefresh

7.1K3 2

Flutter一个轻量且强大的插件：GetX 之状态管理

GetX是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。GetX官方以低功能、高性能、低耦合为基本原则，以轻量级的方式，给开发者提供众多功能。...对于状态管理器，Flutter官方提供有ChangeNotifier，可以使用它来通知更新widget，但它不宜使用太多，官方文档建议最多2个监听器，如果遇到比较大的项目，还是有点麻烦。...响应式状态管理器响应式编程很多框架都有应用，比如vue.js,这里Flutter中使用GetX插件可以让响应式编程编程很简便。通过计数器demo来看看。...多个页面同步更新显示计数器，只需要在另外的页面使用final Controller c = Get.find();即可找到一个正在被其他页面使用的Controler，同样在UI中，想显示该值并自动更新，...下一篇带大家了解GetX的国际化，更多关于GetX的内容，后续会继续发出，Demo地址：https://github.com/Qson8/flutter_getx

1.8K2 0

Flutter一个轻量且强大的插件：GetX 之路由管理

GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。...接下来我们看看getX路由是多么方便。 GetX依赖使用getX，首先要引入依赖库，pubspec.yaml加入该库，并拉取依赖到本地。...()); pop 返回、关闭snackbars, dialogs, bottomsheets Get.back(); push到下一页，但禁止从下一页返回过来 Get.off(LoginPage()...push到下一页，并且从栈内移除以前的所有路由 Get.offAll(LoginPage()); 可以发现，上面的push和pop方式，不需要传递context,省下了很多麻烦，这个GetX在路由管理的最大优势...Get.offNamed("/two"); push下一页并移除所有之前的页面 Get.offAllNamed("/two"); push时携带数据主要在后面加上你要传递的数据即可 Get.toNamed

3.1K1 0

GetX代码生成IDEA插件，超详细功能讲解（透过现象看本质）

：Flutter GetX使用---简洁的魅力！...一篇原理深度剖析：Flutter GetX深度剖析 | 我们终将走出自己的路（万字图文）鱼和渔都已经交给大家了，就没必要去赘述了 [img] 同时，我也写了一个getx代码生成插件：getx_template...模式，从代码上看，还是能看出很明显的区别 Default模式比Easy模式多了一个State层 State是专门用来存放页面变量和初始化相关变量数据的我曾写过一个比较复杂模块页面的变量达到几百个（涉及到复杂的表单提交...框架已经做了这样的处理，但是，需要配套一个参数开启使用在GetBuilder里面写了回收逻辑：对Obx刷新模块无法起效，Obx刷新控件内部无法定位到GetXController，所以无法做回收操作那只能从外部入手...，各位可以自行复制到项目中使用 GetBindWidget 该控件可以回收单个GetXController（bind参数），可以加上对应tag（tag参数）；也可以回收多个GetXController（

2.1K6 1

Flutter状态管理--GetX的简单使用

一、前言 Flutter开发，就需要对各种状态的管理，就是在请求数据的时候需要实时变化，各种交互变化等，在没有使用GetX之前使用Provider,用Provider的时候觉得真香，挺方便的，需要刷新的时候直接...这边介绍下GetX的使用以及常用的方法。二、 GetX GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。...方便至极 8、依然注入三、使用 1、第一步引入get dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2...ProjectCloudSettingItemWidget( '部分可见', isSelect: true, subText: '从组织架构中选择...只要注入了控制器。在其他界面就能拿到A界面的数据。

4.2K2 1

在 Flutter 使用 GetX 对话框

他们帮助传递警告和重要信息，以及做具体的活动。当 Flutter 开发人员在 Flutter 制作一个对话框时，它利用上下文和生成器制作一个对话框。...然而，对于开发人员来说，利用上下文和构建器来培养 Dialogs 是不合适的。在本文中，我们将探索在 Flutter 使用 GetX 的对话框。...我们还将实现一个演示程序，并了解如何使用您的 Flutter 应用程序的获取包创建对话框。获取 | Flutter Package GetX 是一个超轻和强大的解决方案 Flutter 。...我们可以使对话框利用 GetX 的基本代码和非常简单的使一个对话框。它没有利用上下文和生成器来创建对话框。是 Flutter 问题的附加轻量强解。...您还可以使用 GetX 提供的不同选项对其进行自定义。我们将添加标题，中间文本，背景颜色，标题样式，中间文本样式和半径。

1.1K1 0

记住，永远都不要在 Flutter 中使用全局变量

如何以更好的方式管理状态 Flutter 是一个跨平台的动态框架，用于收集和处理来自用户的数据。从开关到单选按钮，必须有效地管理数据状态。但是，全局变量会增加应用程序数据流的复杂性。...该包将应用程序状态与 UI 分离，Provider 促进应用程序维护和测试。...GetX GetX 是一个轻量级的 Flutter 库，它提高了可扩展性，因为它允许你解耦视图、依赖注入、表示层和依赖注入。...要在 Flutter 应用程序启动中开始使用 GetX，请将 get 添加到你的 pubspec.yaml 文件中： dependencies: get: 接下来，导入使用 GetX 库函数和组件时需要的...SetState 方法之前，我们只介绍了管理状态的 Flutter 包和库。当你的小部件更改数据值时，可以调用一个名为 setState 的方法。它将导致 UI 根据新状态发生变化。

4.9K3 0

Flutter零基础到进阶：21天极速入门+跨平台实战项目开发

这篇“心法”将为你规划一条21天的极速学习路径，带你从懵懂到自信，最终能独立开发出跨平台应用。第一部分：核心理念破冰 - 为什么是Flutter？...Day 11-12：导航（Navigation）与路由学习如何在多个页面（Screen）之间跳转，如何传递参数。掌握 Navigator.push 和 Navigator.pop 的基本使用。...构建UI Widget树。编写Model类。在页面中发起网络请求，获取数据。使用状态管理（如Provider）将数据传递给UI并渲染。处理加载中和错误状态。...第三部分：从进阶到精通 - 21天之后的路21天让你“入门”，但Flutter的生态浩瀚无垠。...学习的“道”与“术”这21天的旅程，你真正要掌握的不仅仅是Widget的拼凑，更是一种声明式UI的编程思维：从“如何一步步操作UI变更”的命令式思维，转变为“当前状态（State）下，UI应该长什么样”

8201 0

优化 Flutter 应用开发：探索 ViewModel 的威力

它将业务逻辑从视图中分离出来，使得代码更加清晰和易于维护。...2.2 常见的状态管理方案：setState、Provider、GetX、Riverpod 等在 Flutter 中，有许多不同的状态管理方案可供选择，每种方案都有其自己的特点和适用场景：setState...：setState 是 Flutter 最基本的状态管理方案之一，它通过调用 setState 方法来更新组件的状态，并触发重新构建UI。...每种状态管理方案都有其适用的场景和优缺点，开发者可以根据项目需求和个人偏好选择合适的方案。无论选择哪种方案，都需要考虑到项目的规模、复杂度和团队的技术水平，以及未来的可扩展性和维护性。...无论使用哪种方式实现 ViewModel，都需要考虑到项目的规模、复杂度和团队的技术水平，以及未来的可扩展性和维护性。选择合适的实现方式可以使得代码更加清晰、模块化和易于维护。

1.1K1 0

慕课甄选-Flutter零基础极速入门到进阶实战

慕课甄选推出的 “Flutter 零基础极速入门到进阶实战” 课程，恰好以 “痛点为导向、实战为核心”，通过 “基础速成 + 核心突破 + 项目落地” 的三阶体系，帮零基础用户 3 个月内从 “跨平台小白...学习路径：跳过 “阶段 1 的 Dart 语法” 和 “环境搭建”，直接从 “阶段 1 的组件与布局” 开始，重点学 “阶段 2 的核心突破” 和 “阶段 3 的项目实战”：第 1 周：快速过 “Flutter...，优化列表滑动帧率从 30fps 到 60fps，减少接口请求错误率 50%”，面试时能讲清 “技术难点与解决方案”；课程配套 “Flutter 面试高频题汇总”（含 “状态管理选型”“Flutter...四、从 “学习” 到 “求职” 的全链路支撑这门课的核心优势不仅是 “内容落地”，更在于 “配套资源能帮你解决从学习到求职的所有问题”，避免 “学完课却不知道如何用”。...：聚焦企业常用技能，不教冷门知识，让你学的每一个知识点都能落地到项目；实战落地：2 个企业级完整项目，覆盖从 “开发到上线” 全流程，项目可直接支撑简历与面试；资源支撑：从 “学习资料” 到 “求职服务

5151 0

Flutter之GetX依赖注入tag使用详解

本文主要介绍 GetX 依赖注入中 tag 的作用和使用详解。...作用前面几篇文章介绍了 GetX 依赖注入的使用以及通过源码剖析了依赖注入的原理： •《Flutter应用框架搭建(一)GetX集成及使用详解》•《Flutter 通过源码一步一步剖析 Getx 依赖管理的实现...》•《Flutter之GetX依赖注入使用详解》通过源码得知，GetX 依赖注入中 tag 的主要作用是用于区分相同类型依赖的不同实例。...与 Dagger 和 koin 中的 named 作用相似。...在依赖注入时如果使用了 tag 则必须在 put 、find 中都要加上 tag 参数，且对应的 tag 值一致才能保证注入与获取的依赖对象符合预期。

2.6K3 1

点击加载更多

Flutter 状态管理之GetX库

Flutter 系列之GetX的学习(1) --> 状态管理

Flutter 系列之GetX的学习(2) --> 路由导航

Flutter之GetX依赖注入使用详解

Flutter GetX使用---简洁的魅力！

Flutter之GetX集成及使用详解

Flutter Getx状态管理源码解析

《深入浅出Dart》状态管理

Flutter中值得收藏的几个包

Flutter快速开发——列表分页加载封装

Flutter一个轻量且强大的插件：GetX 之状态管理

Flutter一个轻量且强大的插件：GetX 之路由管理

GetX代码生成IDEA插件，超详细功能讲解（透过现象看本质）

Flutter状态管理--GetX的简单使用

在 Flutter 使用 GetX 对话框

记住，永远都不要在 Flutter 中使用全局变量

Flutter零基础到进阶：21天极速入门+跨平台实战项目开发

优化 Flutter 应用开发：探索 ViewModel 的威力

慕课甄选-Flutter零基础极速入门到进阶实战

Flutter之GetX依赖注入tag使用详解

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐