Flutter基础（前端教程⑧-数据模型）

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

Dart 复制代码

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对象转为JSON
  final 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});

  @override
  Widget 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, // 提供默认值，防止null
      name: json['name'] ?? '',
      age: json['age'] ?? 0,
      email: json['email'] ?? '',
      isPremium: json['isPremium'] ?? false,
    );
  }

  // 将User对象转为JSON
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'age': age,
      'email': email,
      'isPremium': isPremium,
    };
  }

  // 重写toString方法，方便打印对象信息
  @override
  String toString() {
    return 'User{id: $id, name: $name, age: $age, email: $email, isPremium: $isPremium}';
  }
}

多条数据

1. 数据模型

Dart 复制代码

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 数据与解析示例

Dart 复制代码

// 模拟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 展示（列表组件）

Dart 复制代码

class UserListPage extends StatelessWidget {
  @override
  Widget 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}')),
              );
            },
          );
        },
      ),
    );
  }
}