Flutter基础（前端教程⑦-Http和卡片）

1. 假设后端返回的数据格式

{"code": 200,"data": [{"name": "张三","age": 25,"email": "zhangsan@example.com","avatar": "https://picsum.photos/200/200?random=1","status": "在线"},{"name": "李四","age": 30,"email": "lisi@example.com","avatar": "https://picsum.photos/200/200?random=2","status": "离线"},{"name": "王五","age": 22,"email": "wangwu@example.com","avatar": "https://picsum.photos/200/200?random=3","status": "忙碌"},{"name": "赵六","age": 28,"email": "zhaoliu@example.com","avatar": "https://picsum.photos/200/200?random=4","status": "在线"}]
}

2. 修改后代码实现

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';void main() => 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 UserListPage(),),);}
}// 数据模型（保持不变）
class User {final String name;final int age;final String email;final String avatar;final String status;User({required this.name,required this.age,required this.email,required this.avatar,required this.status,});factory User.fromJson(Map<String, dynamic> json) {return User(name: json['name'],age: json['age'],email: json['email'],avatar: json['avatar'],status: json['status'],);}
}// 主页面
class UserListPage extends StatefulWidget {const UserListPage({super.key});@override_UserListPageState createState() => _UserListPageState();
}class _UserListPageState extends State<UserListPage> {List<User> _users = []; // 存储多个用户数据bool _isLoading = true;String? _errorMessage;@overridevoid initState() {super.initState();_fetchUsersData();}// 调用API获取多用户数据void _fetchUsersData() async {try {final response = await http.get(Uri.parse('https://api.example.com/users'), // 替换为实际API地址);if (response.statusCode == 200) {final Map<String, dynamic> jsonData = json.decode(response.body);if (jsonData['code'] == 200) {// 解析JSON数组为User列表final List<dynamic> userList = jsonData['data'];setState(() {_users = userList.map((item) => User.fromJson(item)).toList();_isLoading = false;});} else {setState(() {_errorMessage = '获取数据失败：${jsonData['message']}';_isLoading = false;});}} else {setState(() {_errorMessage = '请求失败：状态码 ${response.statusCode}';_isLoading = false;});}} catch (e) {setState(() {_errorMessage = '网络错误：${e.toString()}';_isLoading = false;});}}@overrideWidget build(BuildContext context) {if (_isLoading) {return const Center(child: CircularProgressIndicator());}if (_errorMessage != null) {return Center(child: Text(_errorMessage!,style: const TextStyle(color: Colors.red, fontSize: 16),),);}// 数据为空的情况if (_users.isEmpty) {return const Center(child: Text('暂无用户数据'));}// 使用ListView展示多个用户卡片return ListView.builder(padding: const EdgeInsets.all(16),itemCount: _users.length,itemBuilder: (context, index) {return Padding(padding: const EdgeInsets.only(bottom: 16),child: _buildUserCard(_users[index]), // 为每个用户构建卡片);},);}// 构建单个用户卡片（保持不变）Widget _buildUserCard(User user) {return Card(elevation: 4,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12),),child: Padding(padding: const EdgeInsets.all(16),child: Row(crossAxisAlignment: CrossAxisAlignment.start,children: [ClipRRect(borderRadius: BorderRadius.circular(8),child: Image.network(user.avatar,width: 80,height: 80,fit: BoxFit.cover,),),const SizedBox(width: 16),Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text(user.name,style: const TextStyle(fontSize: 18,fontWeight: FontWeight.bold,),),Container(padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 2,),decoration: BoxDecoration(color: user.status == '在线' ? Colors.green[100] : Colors.grey[200],borderRadius: BorderRadius.circular(4),),child: Text(user.status,style: TextStyle(color: user.status == '在线' ? Colors.green : Colors.grey[600],fontSize: 12,),),),],),const SizedBox(height: 8),Text('年龄：${user.age}岁',style: const TextStyle(color: Colors.grey),),const SizedBox(height: 4),Text('邮箱：${user.email}',style: const TextStyle(color: Colors.grey),),],),),],),),);}
}

123