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}')),);},);},),);}
}