如何使用getx obx而不是future builder来显示图像列表 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

【源码篇】Flutter GetX深度剖析 | 我们终将走出自己的路（万字图文）

我写这篇文章，并不是为GetX正名我自问自己并不是任何一个状态框架的死忠者，Provider和Bloc，我写了相关使用、原理剖析文章和相关代码生成插件在我心中，这类框架并没有多么神秘因为对其原理较熟...注入的GetXController都是由GetX框架自己来维护的，如果没有GetX这个中间层会是什么样的？...瞟一眼 _notifyData方法，是不是遍历执行了 _onData 列表中item的方法（ item....但是，我认为Obx刷新机制，也是有着自身的缺陷的，从其实现原理上看，这是无法避免的因为Obx的自动刷新，必须需要每一个变量都自带监听触发机制；所以，所有的基础类型，实体以及列表，都需要重新封装，这会造成很严重的使用影响...] Ebx：自动刷新机制自动刷新机制，因为没加泛型，所以无法确定自己内部使用了哪个注入实例，Getx中是在路由里面去回收这些实例的，但是，如果你没使用GetX的路由，又用Obx，你会发现，GetXController

5.4K5 3

Flutter Getx状态管理源码解析

GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。本文来解析下Getx是怎样实现的状态管理。老规矩上Counter Demo。...final Controller c = Get.put(Controller()); return Scaffold( // 使用Obx(()=>每当改变计数时，就更新Text(...Obx是一个继承自ObxWidget的widget，用builder实现build方法。...class Obx extends ObxWidget { final WidgetCallback builder; const Obx(this.builder); @override...到这里我们大概能猜知道Getx的刷新实际是利用StatefulWidget setState的实现。接下来我们接着探索Getx是如何将count状态与ObxWidget关联起来的。

1.5K1 0

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

是的

没有找到

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

为什么getx使用依赖注入？getx的obx自动刷新黑魔法是个什么鬼？...// model // 我们将使整个类成为可观察的，而不是每个属性。...user().name; // 注意是user变量，而不是类变量（首字母是小写的）。...，而不需要使用context，例如： // 默认的Flutter导航 Navigator.of(context).push( context, MaterialPageRoute( builder...，我就写了一个通用控件，来对相应的GetXController进行回收这个通用控件，我也给getx提了PR，一直在审核就算这个控件的PR通过了，集成到getx中，getx低版本也无法使用，没辙这边我给出这个通用回收控件代码

9.1K10 3

Flutter 状态管理之GetX库

在实践中，以下是一些使用场景的示例：使用 StatelessWidget：当小部件的外观和内容不会随时间而改变时，推荐使用 StatelessWidget，例如静态文本、图标等。...使用 StatefulWidget：当小部件的外观和内容需要根据用户交互、数据变化或其他条件动态更新时，需要使用 StatefulWidget，例如表单、列表视图等。 ...地址是：GetX，可以去了解一下，下面我们来使用它。...最后使用Obx包裹需要局部刷新的组件，例如：Obx(() => Text(test.value))，当可观察变量值更新时，Obx包裹中的内容就会进行刷新。 ...GetBuilder包裹构建一个可以全局刷新的组件，在初始化时得到HomeController()，然后在builder中就可以返回一个组件，组件中直接使用controller对象进行参数和方法的使用。

3.2K0 1

Flutter之GetX集成及使用详解

GetX 是一个轻量且强大的解决方案，拥有高性能的状态管理、智能的依赖注入以及便捷的路由管理。本文将从零开始手把手教你如何集成 GetX 搭建属于你的 Flutter 应用框架。...刷新界面在界面上使用响应式变量只需在使用变量的控件上包裹 Obx 即可实现响应式更新，即变量的值发生变化时自动刷新界面： Obx(() => Text("${count.value}")) 数据变化监听...除了使用 Obx 实现界面数据自动刷新外，GetX 提供了多种手动方式对响应式变量进行数据变化监听，当数据发生变化时执行自定义的逻辑，比如数据变更后重新请求接口等。...状态管理器 GetX 还提供了使用 Controller 来管理状态，实现一个自定义 Controller 类继承自 GetxController ，Controller 中进行业务逻辑的处理，当需要改变状态数据时调用...dialog GetX 提供了 dialog 的快捷使用，提供了两种方式，第一种是传入 dialog 显示的 Widget 进行显示，第二种是使用 GetX 默认提供的 dialog 样式进行显示：

11.4K4 6

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

依赖管理: GetX 提供了一种智能方法来管理 Flutter 应用程序中的依赖项，例如视图控制器。GetX 将从内存中删除任何当前未使用的控制器。...下面就看看如何实现吧 2.4.1 GetBuilder GetBuilder 是 GetX 框架中的一种用于手动控制状态更新的工具....我们先看下如何使用吧 GetBuilder(builder: (_) => Text( controller.x.toString...Obx 概念 Obx 是 GetX 中用于实现响应式 UI 的小部件。...自动重建：当可观察变量发生变化时，Obx 会自动重新构建其内部的 UI。这意味着你不需要手动调用 setState 来更新界面。简化代码：使用 Obx 可以减少样板代码，使得状态管理更加直观。

9181 0

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

这意味着 ViewModel 应该根据数据的变化来驱动视图的更新，而不是直接操作UI元素。想象一下，如果一个人不知道目的地在哪里，那么无论如何操作方向盘都不会有意义。...在视图中使用 GetBuilder 或 Obx 获取 Controller：在需要访问 Controller 的地方使用 GetBuilder 或 Obx 获取 Controller 实例，并根据需要更新视图...以下是一些最佳实践：数据驱动视图：ViewModel 应该根据数据的变化来驱动视图的更新，而不是直接操作 UI 元素，这样可以保持代码的清晰和一致性。...该应用程序包含一个输入框用于添加新的待办事项，以及一个列表用于显示已添加的待办事项。...在这个案例中，我们使用 ViewModel 来管理待办事项列表的状态和逻辑，使得应用程序更加清晰、模块化和易于维护。

1.1K1 0

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

下面将通过代码介绍具体如何实现列表分页加载的封装。整体介绍在看具体实现之前，先带大家从整体结构、最终实现的功能、使用到的三方库上做一个整体介绍。...实现功能封装后的列表分页加载实现功能主要如下： • 列表数据显示 • 下拉刷新 • 上拉加载 • 自动判断是否还有更多数据 • 自动处理分页逻辑 • 列表 item 点击事件封装使用到的第三方库 •...，因本篇文章主要介绍列表分页的封装，不会过多介绍 GetX，关于 GetX 更多使用及介绍可参考以下文章： • Flutter之GetX集成及使用详解 • Flutter 通过源码一步一步剖析 Getx...依赖管理的实现 • Flutter之GetX依赖注入使用详解 • Flutter之GetX依赖注入tag使用详解具体实现前面介绍了对于列表分页加载的封装整体分为三层：State、Controller...refreshId 刷新列表界面的 id，用于后面 Controller 刷新指定 Widget 使用，属于 GetX 状态管理的功能，具体可详阅 GetX 相关文章。

7.1K3 2

自研flutter3.x实战仿抖音app短视频直播FlutterLive

flutter3.x_douyin基于flutter3+dart3+getx+meidaKit等技术开发抖音版app视频直播项目。...// 错误路由 // unknownRoute: GetPage(name: '/404', page: Error), ); }}flutter3自定义底部凸起导航底部导航栏使用...通过getx全局状态来联动控制底部导航栏背景颜色。...enabledThumbRadius: 4.0), // 调整滑块的大小 // trackShape: RectangularSliderTrackShape(), // 使用矩形轨道形状...timer; // 是否第一个动画 bool animationFirst = true; // 是否空闲 bool idle = true; // 加入直播间数据列表 List?

1.7K2 1

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

一、前言 Flutter开发，就需要对各种状态的管理，就是在请求数据的时候需要实时变化，各种交互变化等，在没有使用GetX之前使用Provider,用Provider的时候觉得真香，挺方便的，需要刷新的时候直接...这边介绍下GetX的使用以及常用的方法。二、 GetX GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。...路由管理 getx内部实现了路由管理，这个是非常重要的，这样我们就不需要使用其他第三插件，之前都是使用fluro，现在直接不用了，而且getx的路由管理真的真的非常简单。...6、国际化、主题的适配 7、获取全局的BuildContext 这个也是比较喜欢的地方，很多时候弹窗或者其他地方，需要拿到上下文，使用getx,直接获取。...}) ], ), ); } } 6、跨页面交互在A界面处理数据，需要再B界面显示的时候，或者C界面，在或者D界面。

4.3K2 1

【喵咪专场】还不来领取你的小可爱吗？😍

话不多说，先上效果图：是不是很炫酷~ 源码地址：github.com/taxze6/flut…（希望给点点star⭐）本文分析重点：基于GetX封装，MVP架构检测是否是第一次登录，是否展示引导页...架构 mvp的全称为Model-View-Presenter，Model提供数据，View负责显示，Controller/Presenter负责逻辑的处理。...举个例子：使用Getx进行封装：数据存放： class SplashModel { late String Background; late String SplashText; late...定义一个init方法用于初始化： static Future init() async{ // 运行初始 WidgetsFlutterBinding.ensureInitialized(...之后我们就可以在main文件中初始化这配置文件 void main() => Global.init().then((value) => runApp(MyApp())); 复制代码然后我们就可以进行判断啦： Obx

7322 0

Flutter 通过源码一步一步剖析 Getx 依赖管理的实现

本文将通过 Getx 的源码剖析 Getx 依赖管理的具体实现，带你一步一步的了解 Getx 的依赖管理原理，从而在开发过程中灵活使用 Getx 的依赖注入。...而 lazyPut 最后并没有调用 find 方法，所以会在后面第一次使用 find 方法时初始化依赖对象。...Get.putAsync putAsync 是异步注入依赖，源码如下： Future putAsync( AsyncInstanceBuilderCallback builder...Get.delete delete 是用于销毁依赖，如果使用的是 Getx 的路由管理，则会在页面销毁时调用该方法而无需手动调用，源码如下： bool delete({String?...希望能通过本篇文章让你更加深入的了解 Getx 依赖管理的原理，在开发过程中做到灵活使用 Getx 的依赖注入。

1.4K1 0

Flutter 网络请求之Dio库

Flutter 网络请求之Dio库前言正文一、配置项目二、网络请求三、封装 ① 单例模式 ② 网络拦截器 ③ 返回值封装 ④ 封装请求四、结合GetX使用五、源码前言最近再写Flutter...二、网络请求下面我们来设计一个场景，页面上有一个图片和一个按钮，默认显示一个图片，点击按钮之后请求网络接口，返回一个图片，将这个请求返回的网络图片显示出来，首先我们在lib下新建一个https的目录...三、封装在对Dio库进行进行使用的时候，我们通常会进行封装而不是直接使用。...对于dio的封装就到这里了，肯定不是完善了，因为还有很多东西没有考虑到，我们可以根据实际中的需要再去添加，我这里就不赘述了，下面我们结合GetX去使用。...四、结合GetX使用在https包下新建一个https_controller.dart，代码如下： import 'package:get/get.dart'; import '..

1.5K0 0

Flutter 多语言、主题切换之GetX库

库前面我们讲述了状态管理的使用，实际上GetX是非常强大的，功能很多，本篇文章中我们将介绍GetX的多语言切换和主题切换等功能。...二、模拟UI 做戏做全套，为了让你感觉这是一个实际的项目我们就按照实际的项目的UI来做，让你身临其境，只不过缺点就是我需要写一部分与标题内容无关的UI代码，见谅。 ...的常规使用，然后就是在body中根据当前的item下标来确定显示什么内容，底部的bottomNavigationBar中的内容也是如此，onTap表示点击item是的index，items里面就是对应的...0; set theme(int value) => _box.put('theme', value); } 是不是感觉代码很熟悉呢？...处理页面显示的语言设置项目，切换语言和获取语言。

2.2K0 1

在 Flutter 使用 GetX 对话框

在 Flutter 使用 GetX 对话框原文 medium.flutterdevs.com/dialog-usin… 参考 pub.dev/packages/ge… 正文了解如何在您的 Flutter...然而，对于开发人员来说，利用上下文和构建器来培养 Dialogs 是不合适的。在本文中，我们将探索在 Flutter 使用 GetX 的对话框。...演示模块: 这个演示视频展示了如何在 Flutter 中创建一个对话框，并展示了如何使用您的 Flutter 应用程序中的 get 包来工作，以及使用不同的属性。它会显示在你的设备上。...Constructor: 要使用 Get.defaultDialog () ，需要调用下面的构造函数: Future使用了 GetMaterialApp 而不是 MaterialApp，因为我们正在使用 GetX 库构建应用程序。

1.1K1 0

Flutter 构建完整应用手册-导航器顶

路线定义一个Todo类创建Todos列表创建一个可以显示关于待办事项信息的详情屏幕导航并将数据传递到详情屏幕 1.定义一个Todo类首先，我们需要一种简单的方法来表示Todos。...在这个例子中，我们将生成20个待办事项并使用ListView显示它们。有关使用列表的更多信息，请参阅基本列表配方。...'A description of what needs to be done for Todo $i', ), ); 使用ListView显示Todos列表 new ListView.builder...然后，我们将使用给定的Todo来构建UI。...通常，您可以创建可重用的部件，而不是重复代码，但对于此示例，我们将复制代码以进行演示。

5.7K1 0

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

场景学习）；第三天：异步编程（Future“async/await“try/catch，结合 “网络请求获取商品数据” 场景，让你理解 “为什么要异步”“如何处理请求失败”）。...每节语法课结束后，立即做 “10 分钟小练习”（如 “用 List 遍历生成 5 个商品名称”“用 Future 模拟网络请求延迟 2 秒后显示数据”），确保语法学完能用上。...删除地址，设置默认地址）、收藏列表（显示收藏的商品，支持取消收藏）”。...DevTools” 分析性能，优化 “列表滑动卡顿”（用ListView.builder懒加载）、“首屏加载慢”（延迟加载非首屏组件）；打包：演示 “Android 打包 APK（签名配置）、iOS...）、未读消息数显示（好友列表 + APP 图标角标）”。

5231 0

我的 Flutter TDD 心路历程

先记住一个原则：我们所写的每一行代码，都尽可能先编写好测试用例来覆盖，即先写测试用例，再写实现这里我们先忍着不着急去优化或者重构，我们继续往下 1.2 第二个用例：加载结果为空列表显示 empty 页面...widget 而不是回调传入的 builder 参数，因此，builder 只回调了三次，这也就导致之前的用例失败了。...思考：由于「加载更多」是由列表内部触发的，如果我们想知道加载什么时候结束，我们就必须拿到加载的句柄，在 Dart 中，一般我们用 Future 来表示，于是我们能想到：我们可以从外部传入一个返回 Future...单测代码这里忽略（这里不是重点），直接看下实现：入参增加一个 onLoadMore 函数，返回一个 Future final Future> Function()?...，而往往具有可测性的代码，其结构、职责更加清晰觉得写的用例有点傻，感觉没什么用需要思考是不是需要写这个用例，不是所有代码都需要写单测，比如我们不需要验证一个传入了 “Hello” 的 Text

1.5K2 0

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

本文主要介绍 GetX 依赖注入中 tag 的作用和使用详解。...作用前面几篇文章介绍了 GetX 依赖注入的使用以及通过源码剖析了依赖注入的原理： •《Flutter应用框架搭建(一)GetX集成及使用详解》•《Flutter 通过源码一步一步剖析 Getx 依赖管理的实现...此时就可以使用 tag 来解决。...比如一个新闻详情界面，在新闻详情界面一般会有相关新闻列表，点击相关的新闻时又会跳转到新的新闻详情界面，在代码中新闻详情界面是只有一个的，但是传入的新闻 id 不同显示不同的新闻内容，如果依赖注入/获取时不带...此时就需要用到 tag 来解决，可以使用新闻的 id 作为 tag 以确保不同的新闻展示其对应的内容，并且能做到相同新闻数据共享的效果避免重复加载数据。

2.6K3 1

干货 | 携程酒店Flutter性能优化实践

用户操作 FPS 的定义是每秒传输帧数 (Frames Per Second)，是图像领域的概念。对于手机客户端来说，主流显示屏的刷新率为60Hz，高端手机显示屏刷新率可以达到120Hz及以上。...d) 减少耗时计算，放到Isolate Flutter应用中的Dart代码执行在UI Runner中，而Dart是单线程的，我们平时使用的异步任务Future都是在这个单线程的Event Queue之中...可以使用性能图层提供的两项参数，负责检查多视图叠加的视图渲染开关checkerboardOffscreenLayers和负责检查缓存的图像开关checkerboardRasterCacheImages来检查这种模块的存在...，使用了 saveLayer 的 Widget 会自动显示为棋盘格式，并随着页面刷新而闪烁。...与检查多视图叠加渲染的checkerboardOffscreenLayers 参数类似，Flutter 也提供了检查缓存图像的开关 checkerboardRasterCacheImages，来检测在界面重绘时频繁闪烁的图像

2.5K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭