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

Flutter基础(前端教程⑧-数据模型)

这个示例展示了如何创建数据模型、解析 JSON 数据,以及在 UI 中使用这些数据:

import 'package:flutter/material.dart';
import 'dart:convert';void main() {// 示例:手动创建User对象final user = User(id: 1,name: '张三',age: 25,email: 'zhangsan@example.com',isPremium: true,);// 示例:将User对象转为JSONfinal jsonData = user.toJson();print('转为JSON: $jsonData');// 示例:从JSON解析User对象final jsonString = '{"id":2,"name":"李四","age":30,"email":"lisi@example.com","isPremium":false}';final parsedUser = User.fromJson(json.decode(jsonString));print('解析后的用户: ${parsedUser.name}');runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('数据模型示例')),body: const Center(child: Text('查看控制台输出了解数据模型用法'),),),);}
}// 数据模型
class User {final int id;final String name;final int age;final String email;final bool isPremium;// 构造函数User({required this.id,required this.name,required this.age,required this.email,required this.isPremium,});// 从JSON解析为User对象factory User.fromJson(Map<String, dynamic> json) {return User(id: json['id'] ?? 0, // 提供默认值,防止nullname: json['name'] ?? '',age: json['age'] ?? 0,email: json['email'] ?? '',isPremium: json['isPremium'] ?? false,);}// 将User对象转为JSONMap<String, dynamic> toJson() {return {'id': id,'name': name,'age': age,'email': email,'isPremium': isPremium,};}// 重写toString方法,方便打印对象信息@overrideString toString() {return 'User{id: $id, name: $name, age: $age, email: $email, isPremium: $isPremium}';}
}

多条数据

1. 数据模型

class User {final int id;final String name;final int age;User({required this.id,required this.name,required this.age,});// 从JSON解析单个用户factory User.fromJson(Map<String, dynamic> json) {return User(id: json['id'] ?? 0,name: json['name'] ?? '',age: json['age'] ?? 0,);}// 解析用户列表static List<User> fromJsonList(List<dynamic> jsonList) {return jsonList.map((json) => User.fromJson(json)).toList();}
}

2. 模拟 JSON 数据与解析示例

// 模拟API返回的用户列表JSON
String mockUserListJson = '''
[{"id": 1, "name": "张三", "age": 25},{"id": 2, "name": "李四", "age": 30},{"id": 3, "name": "王五", "age": 22}
]
''';// 解析示例
void parseUsers() {final List<dynamic> jsonList = json.decode(mockUserListJson);final List<User> users = User.fromJsonList(jsonList);print('用户数量: ${users.length}');print('第一个用户: ${users[0].name}');
}

3. UI 展示(列表组件)

class UserListPage extends StatelessWidget {@overrideWidget build(BuildContext context) {// 解析模拟数据final List<dynamic> jsonList = json.decode(mockUserListJson);final List<User> users = User.fromJsonList(jsonList);return Scaffold(appBar: AppBar(title: const Text('用户列表')),body: ListView.builder(itemCount: users.length,itemBuilder: (context, index) {final user = users[index];return ListTile(leading: CircleAvatar(child: Text('${user.id}')),title: Text(user.name),subtitle: Text('年龄: ${user.age}'),trailing: const Icon(Icons.arrow_forward_ios),onTap: () {// 点击事件处理ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('点击了 ${user.name}')),);},);},),);}
}

http://www.lryc.cn/news/583653.html

相关文章:

  • vue快速上手
  • 设计模式(行为型)-责任链模式
  • ARM单片机OTA解析(一)
  • whitt算法之特征向量的尺度
  • 数据结构之位图和布隆过滤器
  • 详解CAN总线的位填充机制
  • 数据结构——深度优先搜索与广度优先搜索的实现
  • [附源码+数据库+毕业论]基于Spring Boot+mysql+vue结合内容推荐算法的学生咨询系统
  • RabbitMQ 4.1.1-Local random exchange体验
  • C++如何进行性能优化?
  • 19-C#静态方法与静态类
  • 【WEB】Polar靶场 21-25题 详细笔记
  • 从0开始学习R语言--Day42--LM检验
  • 异地组网
  • 数据分析框架和方法
  • Mac电脑,休眠以后,发现电量一直在减少,而且一个晚上,基本上是没了,开机都需要插电源的简单处理
  • 卫星通信终端天线的5种对星模式之二:功率检测型载波跟踪
  • 【PyTorch】PyTorch中数据准备工作(AI生成)
  • 深度学习——损失函数
  • Hexo + Butterfly + Vercel 完整个人Blog部署指南
  • Flask3.1打造极简CMS系统
  • 自动化Trae Apollo参数解释的批量获取
  • 股权结构解析
  • SpringBoot集成文件 - 大文件的上传(异步,分片,断点续传和秒传)
  • 专题一_双指针_查找总价格为目标值的两个商品
  • 拼多多正在错失即时零售?
  • ECR仓库CloudFormation模板完整指南
  • 【每日算法】专题六_模拟
  • WPF学习笔记(27)科学计算器
  • 1、专栏介绍以及目录