当前位置: 首页 > ops >正文

Flutter基础(前端教程①④-data.map和assignAll和fromJson和toList)

1. data.map((item) => ...)

作用:遍历一个列表,把每个元素「转换」成另一种形式。
类比:就像工厂的流水线,每个产品经过加工变成新的样子。

// 原始数据
final numbers = [1, 2, 3];// 把每个数字变成它的平方
final squared = numbers.map((num) => num * num);print(squared); // 输出: (1, 4, 9)

在你的代码中
把 JSON 对象列表 → 转换为 Post 模型列表。

final jsonList = [{"id":1,"title":"post1"},{"id":2,"title":"post2"}];// 把每个 JSON 对象转换为 Post 实例
final posts = jsonList.map((item) => Post.fromJson(item));

2. assignAll()

作用:把一个新列表「替换」掉 GetX 控制器里的旧列表,并触发 UI 更新。
类比:就像给书架换一批新书,换完后马上通知所有人来看。

// 假设 controller.posts 是 RxList<Post>
final newPosts = [Post(id:1, title:"..."), Post(id:2, title:"...")];// 替换旧列表并通知 UI 更新
controller.posts.assignAll(newPosts);

对比普通赋值

// 普通赋值:不会触发 UI 更新
controller.posts = newPosts; // ❌ 错误// 使用 assignAll:触发 UI 更新
controller.posts.assignAll(newPosts); // ✅ 正确

3. fromJson()

作用:把 JSON 数据(Map)「解析」成 Dart 对象。
类比:就像把说明书翻译成你能看懂的语言。

class Post {final int id;final String title;Post({required this.id, required this.title});// 工厂方法:从 JSON 解析factory Post.fromJson(Map<String, dynamic> json) {return Post(id: json['id'],       // 从 JSON 中取 id 字段title: json['title'], // 从 JSON 中取 title 字段);}
}// 使用示例
final json = {"id": 1, "title": "Hello"};
final post = Post.fromJson(json);print(post.title); // 输出: Hello

4. toList()

作用:把 map() 后的结果「转换」成真正的列表(List)。
类比:就像把生产线上的产品装箱打包,变成可以直接用的商品。

// 原始数据
final numbers = [1, 2, 3];// 先 map 转换,再 toList 装箱
final squaredList = numbers.map((num) => num * num) // 转换为 (1, 4, 9).toList();              // 转换为 [1, 4, 9]print(squaredList); // 输出: [1, 4, 9](注意中括号)

1. 原始数据(JSON 列表)

假设从 API 获取的原始数据是这样的:

final jsonList = [{"id": 1, "title": "Post 1"},{"id": 2, "title": "Post 2"}
]; // 这是一个 List<Map<String, dynamic>>
2. map() 转换过程

map() 会遍历列表中的每个 JSON 对象(Map),并通过 fromJson() 转换为 Post 对象:

jsonList.map((item) => Post.fromJson(item))// 等价于:
[Post.fromJson({"id": 1, "title": "Post 1"}),Post.fromJson({"id": 2, "title": "Post 2"})
]// 转换后得到:
(Post(id:1, title:"Post 1"), Post(id:2, title:"Post 2"))

注意:此时的结果是一个 Iterable<Post>(用小括号表示),还不是真正的 List

3. toList() 最终转换

toList() 会把 Iterable<Post> 变成真正的 List<Post>

(Post(id:1, title:"Post 1"), Post(id:2, title:"Post 2")).toList()// 最终得到:
[Post(id:1, title:"Post 1"), Post(id:2, title:"Post 2")]

为什么需要 toList()

  1. map() 的返回值是 Iterable
    Dart 中的 map() 方法返回的是 Iterable,这是一个更通用的集合接口,不支持 List 的所有操作(如 add()remove())。

  2. ListView 要求 List 类型
    Flutter 的 ListView.builder() 需要传入 List 类型的数据:

ListView.builder(itemCount: posts.length, // 必须是 List 才能用 .lengthitemBuilder: (context, index) => Text(posts[index].title),
);

GetX 的 assignAll() 也要求 List

controller.posts.assignAll(posts); // 必须传入 List<Post>

http://www.xdnf.cn/news/15723.html

相关文章:

  • 使用C#对象将WinRiver项目文件进行复杂的XML序列化和反序列化实例详解
  • 多模态交互视角下生成式人工智能在中小学探究式学习中的认知支架效能研究
  • 立创EDA中双层PCB叠层分析
  • 锂电池生产过程图解
  • 【OD机试】停车场收费
  • 暑假训练七
  • 【52】MFC入门到精通——(CComboBox)下拉框选项顺序与初始化不一致,默认显示项也不一致
  • Three.js与AIGC的化学反应:AI生成3D模型在实时渲染中的优化方案
  • Weavefox 图片 1 比 1 生成前端源代码
  • 基于Electron打包jar成Windows应用程序
  • LangGraph教程6:LangGraph工作流人机交互
  • [MySQL基础3] 数据控制语言DCL和MySQL中的常用函数
  • 基于Socket来构建无界数据流并通过Flink框架进行处理
  • 软考 系统架构设计师系列知识点之杂项集萃(112)
  • 根据ARM手册,分析ARM架构中,原子操作的软硬件实现的底层原理
  • LeetCode|Day19|14. 最长公共前缀|Python刷题笔记
  • 财务术语日常学习:存货跌价准备
  • scalelsd 笔记 线段识别 本地部署 模型架构
  • 第二阶段-第二章—8天Python从入门到精通【itheima】-133节(SQL——DQL——基础查询)
  • 云服务器搭建自己的FRP服务。为什么客户端的项目需要用Docker启动,服务端才能够访问到?
  • Leetcode 05 java
  • 动态规划算法的欢乐密码(三):简单多状态DP问题(上)
  • 微信小程序171~180
  • MySQL详解二
  • 创建第二大脑--第五章 组织:以行动为导向
  • NLP中情感分析如何结合知识图谱在跨文化领域提升观念分析和价值判断的准确性?
  • GLU 变种:ReGLU 、 GEGLU 、 SwiGLU
  • js基本数据类型之字符串类型
  • 你的品牌需要一个AI首席内容官——解构BrandCraft如何解决内容创作的终极痛点
  • CCF编程能力等级认证GESP—C++4级—20250628