首页
学习
活动
专区
圈层
工具
发布

在 Flutter 移动应用程序中创建一个列表

Flutter 是一个流行的开源工具包,它可用于构建跨平台的应用。在文章《用 Flutter 创建移动应用》中,我已经向大家展示了如何在 Linux 中安装 Flutter 并创建你的第一个应用。...而这篇文章,我将向你展示如何在你的应用中添加一个列表,点击每一个列表项可以打开一个新的界面。...查看Flutter应用的主要部分 Flutter 应用的典型入口点是 main() 函数,我们通常可以在文件 lib/main.dart 中找到它: void main() { runApp(MyApp...在 lib 目录中我们创建一个新文件并命名为 item_details_page。...image.png 输入 Hero,然后从建议的下拉列表中选择 Hero((Key key, @required this, tag, this.create)): image.png 最后我们在

4.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    在 App 中,列表数据加载是一个很常见的功能,几乎大多数 App 中都存在列表数据的展示,而对于大数据量的列表展示,为提高用户体验、减少服务器压力等,一般采用分页加载列表数据,首次只加载一页数据,当用户向下滑动列表到底部时再触发加载下一页数据...为方便开发过程中快速实现列表分页的功能,对列表分页加载统一封装是必不可少的,这样在开发过程中只需关注实际的业务逻辑而不用在分页数据加载的处理上花费过多时间,从而节省开发工作量、提高开发效率。...,因本篇文章主要介绍列表分页的封装,不会过多介绍 GetX,关于 GetX 更多使用及介绍可参考以下文章: • Flutter之GetX集成及使用详解 • Flutter 通过源码一步一步剖析 Getx...依赖管理的实现 • Flutter之GetX依赖注入使用详解 • Flutter之GetX依赖注入tag使用详解 具体实现 前面介绍了对于列表分页加载的封装整体分为三层:State、Controller...成员变量 pagingState 类型为泛型 S 即 PagingState 类型,在 onInit 中通过抽象方法 getState 获取,getState 方法在子类中实现,返回 PagingState

    7.1K32

    Flutter 状态管理之GetX库

    Flutter 状态管理之GetX 前言 正文 一、创建项目 二、状态组件 三、状态更新UI 四、GetX库 ① 添加依赖 ② 局部刷新 ③ 全局刷新 五、源码 前言   Flutter使用的是声明式UI...它的属性(props)在创建时被设置,并且在整个生命周期中保持不变。 当父级小部件发生更改时,StatelessWidget 将重新构建,但状态不会发生变化。...使用 StatefulWidget:当小部件的外观和内容需要根据用户交互、数据变化或其他条件动态更新时,需要使用 StatefulWidget,例如表单、列表视图等。   ...声明式UI基本上都是这种方式,了解了Flutter基本的状态更新UI,下面我们再来学习一下GetX这个库。...,写法如下所示: dependencies: get: ^4.3.8 然后点击Pub get,获取并安装GetX库,如下图所示:   你也可以在Terminal命令行中输入flutter pub get

    3.1K01

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

    在本文中,我们将详细了解全局变量的缺点,并学习如何以更有效的方式管理状态。 Flutter 中的全局变量是什么? 全局变量是公共变量,可以被 Flutter 程序中的每个方法和对象访问。...在下一部分中,你将学习状态管理库和包,它们提供了以更好的方式管理变量状态的更好方法,而不会影响维护过程。...以下是可用于管理状态的状态包管理器和库的列表: 1. Provider 状态管理包 Provider 状态管理器包被广泛用于收集小部件状态数据并在状态更改时更新小部件。...GetX GetX 是一个轻量级的 Flutter 库,它提高了可扩展性,因为它允许你解耦视图、依赖注入、表示层和依赖注入。...要在 Flutter 应用程序启动中开始使用 GetX,请将 get 添加到你的 pubspec.yaml 文件中: dependencies: get: 接下来,导入使用 GetX 库函数和组件时需要的

    4.9K30

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

    在移动开发领域,“跨平台” 已成为企业降本增效的核心需求 —— 传统开发需分别投入 iOS(Swift/OC)和 Android(Kotlin/Java)团队,成本高、迭代慢;而 Flutter 凭借...而非孤立记语法痛点 2:组件用法 “学用脱节”知道Text“Container“ListView等组件的基础用法,但不会组合成 “登录页”“商品列表页” 等实战界面课程从 “最小实战单元” 入手:比如学完基础组件后...”“主题切换”);▶ 实战案例:开发 “购物车页面”,实现 “点击 +/- 按钮修改商品数量,实时更新总价”,用 Provider 共享购物车数据,让首页图标同步显示商品数量;进阶状态管理:GetX(适合...测试优化与打包上线(1 天)测试:重点测试 “临界场景”(如 “购物车商品库存为 0 时无法添加”“订单支付后状态自动更新”“无网时显示离线缓存数据”),修复 “闪退、卡顿” 问题;优化:用 “Flutter...五、这门课能帮你解决 “学 Flutter 的终极问题”很多人学 Flutter 的终极问题不是 “学不会语法”,而是 “学了没用”—— 要么不会做项目,要么做的项目不符合企业需求,要么求职时无亮点。

    50510

    Flutter之GetX依赖注入使用详解

    put 为了验证依赖注入的功能,首先创建两个测试页面:PageA 和 PageB ,PageA 添加两个按钮 toB 和 find ,分别为跳转 PageB 和获取依赖;在 PageB 中通过 put...是因为在页面销毁时回收有个前提是使用 GetX 的路由管理页面,使用官方的 Navigator 进行路由跳转时页面销毁不会触发回收依赖。...permanent put 还有一个 permanent 参数,在 GetX 一文里介绍过,permanent 的作用是永久保留,默认为 false,接下来在 put 时设置 permanent 为 true...find 时不会再次初始化 User;同样的 PageB 销毁时依赖也会被回收,导致在 PageA 中获取会报错。...): page a username : 张三 id: 1643277547666 通过输出日志分析,在 PageB 中的表现与不加 fenix 表现一致,但是返回 PageA 后获取依赖并没有报错,

    2.1K31

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

    介绍 GetX 是 Flutter 的超轻量级强大解决方案。它快速、实用地结合了高性能状态管理、智能依赖注入和路由管理。 状态管理: GetX 的旗舰功能之一是其直观的状态管理功能。...GetX 中的状态管理几乎不需要样板代码即可实现。 路线管理: GetX 提供了用于在 Flutter 应用程序内导航的 API。此 API 非常简单,所需代码较少。...依赖管理: GetX 提供了一种智能方法来管理 Flutter 应用程序中的依赖项,例如视图控制器。GetX 将从内存中删除任何当前未使用的控制器。...展示使用 [状态管理] 下面我们将创建一个项目, 演示Getx的使用 创建项目+启动项目 flutter create project_name cd /project_name flutter run...下面就看看如何实现吧 2.4.1 GetBuilder GetBuilder 是 GetX 框架中的一种用于手动控制状态更新的工具.

    90210

    GetX代码生成IDEA插件,超详细功能讲解(透过现象看本质)

    :Flutter GetX使用---简洁的魅力!...[img] 本文长期更新,如果想知道插件每次详细更新内容,可以点进来看。...,选择其中一按钮,另一按钮会自动取消勾选 这算是一个非常有用的功能了 如果大家在PageView中使用getx,可能会发现,所有的子页面中的GetXController,一下全被注入了!...对于用lint这种强规则的人,我表示: [img] pub:flutter_lints 最近Flutter在新建项目里面,默认加上了flutter_lints这个库,这个库的规则宽松很多,规则基本也是规范...支持 flutter_lints 规则 3.1.x 显著的提升整体页面布局 高尺寸屏幕不会再出现坑比问题了 支持lint规则(lintNorm) 改善快捷代码提示功能,“get”前缀改成为“getx”

    2.1K61

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

    首先导入GetX的插件 # getx 状态管理框架 https://pub.flutter-io.cn/packages/get # 非空安全最后一个版本(flutter 2.0之前版本) get:...,会对初次接触该框架的人,造成很大的困扰 getx的IDEA插件现已支持一键Wrap Widget生成GetBuilder,可以一定程度上提升你的开发效率 跨页面交互 跨页面交互,在复杂的场景中,是非常重要的功能...中可能感受不到,但是在web端,加载页面的url地址就是命名路由你所设置字符串,也就是说,在web中,可以直接通过url导航到相关页面 下面说明下,如何使用 首先,在主入口出配置下 void main(..." onDelete() called [GETX] "TestLogicthree" deleted from memory 一些问题汇总 如果使用中,有比较坑的问题,希望大家在评论里提出来,我会在这个栏目汇总一下...(透过现象看本质) GetX原理:Flutter GetX深度剖析 | 我们终将走出自己的路(万字图文) 告别克苏鲁代码山:Flutter 改善套娃地狱问题(仿喜马拉雅PC页面举例) 让Dialog拥有更多可能

    9.1K103

    FlutterDojo设计之道—状态管理之路(七)

    Provider在列表中使用 在前面的讲解中,我们大部分的场景都是在普通的Box布局中,相信大家对Provider的使用已经非常清楚了,下面来看下在List中的使用场景,相信对于很多App来说,列表应该是大部分页面的核心...官方并没有给出很好的建议,官方的Demo也都是在静态的列表中做的演示,并不涉及到列表的修改,所以下面,我将和大家一起讨论下如何在列表中使用Provider。...在List的ItemBuilder中,我们做一个Selector筛选,筛选内容为dataList中的ItemModel,当在指定的Item中点击CheckBox后,model被更新,所以Selector...的shouldRebuild被判断为true,所以这个Item就会被更新,而其它未点击的Item则因为没有改变所以不会被更新,这样就控制了List的刷新范围为被更新的Item,代码如下所示。...当列表数据不固定时,刷新整个List 当列表数据固定时,只刷新更新的Item 有了这样的思路,就可以理解前面的Model中为什么需要一个shouldListRebuild变量了吧,剩下的代码如下所示。

    1.2K10

    在 Flutter 使用 GetX 对话框

    在 Flutter 使用 GetX 对话框 原文 medium.flutterdevs.com/dialog-usin… 参考 pub.dev/packages/ge… 正文 了解如何在您的 Flutter...应用程序使用 GetX 创建一个对话框 在 Flutter 使用 GetX 对话框 是移动应用程序的基本组成部分。...在本文中,我们将探索在 Flutter 使用 GetX 的对话框。我们还将实现一个演示程序,并了解如何使用您的 Flutter 应用程序的获取包创建对话框。...这是我对使用 GetX 进行用户交互的对话框的一个小小介绍,它正在使用 Flutter 工作。 我希望这个博客将提供您充分的信息,尝试在您的 Flutter 项目使用 GetX 对话框。...使用 GetX 插件制作一个工作对话框的演示程序。在本博客中,我们已经研究了 flutter 应用程序的使用 GetX 的对话框。我希望这个博客能帮助你更好地理解这个对话框。所以请尝试一下。----

    1.1K10

    《深入浅出Dart》状态管理

    现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 状态管理 在应用程序开发中,状态管理是一项重要的任务,用于管理应用程序的数据和状态。...状态管理的目标是确保应用程序的不同部分能够共享和响应相同的数据,并保持数据的一致性和更新。 在Dart和Flutter中,有多种状态管理方案可供选择,以满足不同规模和复杂度的应用程序需求。...setState方法允许你在StatefulWidget中更新状态并触发UI的重建。...结论 状态管理是应用程序开发中的重要方面,可以帮助我们更好地组织和管理应用程序的状态和数据流。在Dart和Flutter中,有多种状态管理方案可供选择,每种方案都有其适用的场景和优势。...参考资料 要深入了解Dart语言和Flutter中的状态管理,可以参考以下官方资源和文档: Flutter状态管理介绍 Provider官方文档 Riverpod官方文档 GetX官方文档 BLoC官方文档

    58710

    Flutter之GetX集成及使用详解

    在 Flutter 应用开发过程中,状态管理、路由管理在应用框架中扮演着重要角色。目前主流的解决方案有 Google 官方的 Provider,三方的 GetX、Bloc、 fish-redux 等。...本文将从零开始手把手教你如何集成 GetX 搭建属于你的 Flutter 应用框架。...0.GetX 集成 添加依赖 在 pubspec.yaml 文件中添加 GetX 的依赖,如下: dependencies: flutter: sdk: flutter get: ^4.5.1...刷新界面 在界面上使用响应式变量只需在使用变量的控件上包裹 Obx 即可实现响应式更新,即变量的值发生变化时自动刷新界面: Obx(() => Text("${count.value}")) 数据变化监听...内部会自动处理,当不需要时自动移除 Get.delete(); 3.路由管理 路由也是 Flutter 项目重要的一环,在 Flutter 中进行页面跳转就是通过路由实现

    11.4K45

    Flutter 像素编辑器#02 | 配置编辑

    如下所示,是 Flutter 像素编辑器的第二版: 1. Flutter 像素编辑器布局结构 在桌面端中,第二版将应用划分为五个区域: 顶部菜单栏 MenuToolBar :放置菜单以及操作按钮。...对于是否显示网格来说 Checkbox 的 value 可以访问 configLogic 中的数据;点击事件 onChanged 中,通过 configLogic 对象触发 toggleShowGrid...如下定义 PixPaintLogic 来维护像素点列表 _pixCells,以及画笔颜色 _paintColor。这样命中像素点数据变化逻辑,就可以写在 PixPaintLogic 中。...所以只要将两个可监听的,业务逻辑对象传入画板中即可: 在共享区域的子树,有上下文的地方,就可以得到业务逻辑对象。...这里可以通过 read 方法,让绘制区不建立依赖关系,这样更新时 EditorArea 不会重新构建,仅通知画板进行更新: 5、性能方面 目前 100*100 的网格中,需要绘制 10000 个方格,此时

    70910

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

    前置知识 在说GetX设计思想之前,需要先介绍几个知识,在Flutter茁壮发展的历程里,他们都留下了浓墨重彩的一笔 InheritedWidget 不得不说,这个控件真的是一个神奇控件,它就仿佛是一把神兵利器...会遍历 _onData 列表,根据条件会执行其泛型的 _data 的方法 我猜,_data 中的方法体,十有八九在某个地方肯定添加了 setState() class GetStream {...最终添加 _onData 该列表变量中 瞟一眼 _notifyData方法,是不是遍历执行了 _onData 列表中item的方法( item....中是在路由里面去回收这些实例的,但是,如果你没使用GetX的路由,又用Obx,你会发现,GetXController居然无法自动回收!!!...系列文章 + 相关地址 文章中Demo的Github地址:flutter_use Flutter GetX使用---简洁的魅力!

    5.4K53

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

    本文主要介绍 GetX 依赖注入中 tag 的作用和使用详解。...作用 前面几篇文章介绍了 GetX 依赖注入的使用以及通过源码剖析了依赖注入的原理: •《Flutter应用框架搭建(一)GetX集成及使用详解》•《Flutter 通过源码一步一步剖析 Getx 依赖管理的实现...》•《Flutter之GetX依赖注入使用详解》 通过源码得知,GetX 依赖注入中 tag 的主要作用是用于区分相同类型依赖的不同实例。...比如一个新闻详情界面,在新闻详情界面一般会有相关新闻列表,点击相关的新闻时又会跳转到新的新闻详情界面,在代码中新闻详情界面是只有一个的,但是传入的新闻 id 不同显示不同的新闻内容,如果依赖注入/获取时不带...总结 在开发过程中依赖注入时灵活使用 tag 可以解决很多复杂的业务场景,提高代码的复用性。

    2.6K31
    领券