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