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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/88249.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/88249.shtml
英文地址,请注明出处:http://en.pswp.cn/pingmian/88249.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pytorch chunk 切块

目录 chunk切块 chunk​​​​​​​切块 import torch# 创建一个形状为 [2, 3, 4] 的张量 x torch.arange(6).reshape(2, 3) print("原始张量形状:", x.shape) print("x:", x) # 输出: 原始张量形状: torch.Size([2, 3, 4])# 沿着最后一个维度分割成 2 …

PCIe基础知识之Linux内核中PCIe子系统的架构

5.1 先验知识 驱动模型&#xff1a;Linux建立了一个统一的设备模型&#xff0c;分别采用总线、设备、驱动三者进行抽象&#xff0c;其中设备和驱动均挂载在总线上面&#xff0c;当有新的设备注册或者新的驱动注册的时候&#xff0c;总线会进行匹配操作(match函数)&#xff0c;…

2.2 TF-A在ARM生态系统中的角色

目录2.2.1 作为ARM安全架构的参考实现2.2.2 与ARM处理器内核的协同关系2.2.3 在启动链中的核心地位2.2.4 与上下游软件的关系与底层固件的协作与上层软件的接口2.2.5 在ARM生态系统中的标准化作用2.2.6 典型应用场景2.2.1 作为ARM安全架构的参考实现 TF-A&#xff08;Trusted …

Chrome 开发者警告:`DELETE err_empty_response` 是什么?jQuery AJAX 如何应对?

在Web开发的世界里,我们时常会遇到各种各样的错误信息,它们像一个个谜语,等待我们去破解。今天我们要聊的这个错误——DELETE err_empty_response,尤其是在使用 jQuery 的 $.ajax 发送 DELETE 请求时遇到,确实让人头疼。它意味着浏览器尝试删除某个资源,却收到了一个空荡…

python作业 1

1.技术面试题 &#xff08;1&#xff09;TCP与UDP的区别是什么&#xff1f; 答&#xff1a; TCP建立通信前有三次握手&#xff0c;结束通信后有四次挥手&#xff0c;数据传输的可靠性高但效率较低&#xff1b;UDP不需要三次握手就可传输数据&#xff0c;数据传输完成后也不需要…

centos7 java多版本切换

文章目录前言一、卸载原来的jdk二、下载jdk三、解压jdk三、配置环境变量四、切换JAVA环境变量前言 本来是为了安装jenkins&#xff0c;安装了对应的java,node,maven,git等环境&#xff0c;然后运行jenkins时候下载插件总是报错&#xff0c;我下载的jenkins是 2.346.1 版本&…

用Python和OpenCV从零搭建一个完整的双目视觉系统(四)

本系列文章旨在系统性地阐述如何利用 Python 与 OpenCV 库&#xff0c;从零开始构建一个完整的双目立体视觉系统。 本项目github地址&#xff1a;https://github.com/present-cjn/stereo-vision-python.git 在上一篇文章中&#xff0c;我们完成了相机标定这一最关键的基础步骤…

STM32-中断

中断分为两路&#xff1a;12345用于产生中断&#xff1b;678产生事件外设为NVIC设计流程&#xff1a;使能外设中断设置中断优先级分组初始化结构体编写中断服务函数初始化结构体&#xff1a;typedef struct {uint8_t NVIC_IRQChannel; 指定要使能或禁用的中断通道例如: TIM3_I…

Shader面试题100道之(61-80)

Shader面试题&#xff08;第61-80题&#xff09; 以下是第61到第80道Shader相关的面试题及答案&#xff1a; 61. 什么是UV展开&#xff1f;它在Shader中有什么作用&#xff1f; UV展开是将3D模型表面映射到2D纹理空间的过程&#xff0c;用于定义纹理如何贴合模型。在Shader中&a…

C#基础:Winform桌面开发中窗体之间的数据传递

1.主窗体using System; using System.Windows.Forms;public partial class MainForm : Form {public MainForm(){InitializeComponent();}// 打开二级窗体private void btnOpenSecondaryForm_Click(object sender, EventArgs e){// 创建二级窗体并订阅事件SecondaryForm second…

工程改Mvvm

导入CommunityToolKit vs2017只能导入7 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.Input;namespace WpfApp1.vi…

【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置

目录 1 -> 通过hook以及插件上下文实现动态配置 2 -> 在hvigorfile.ts中通过overrides关键字导出动态配置 3 -> 通过hook以及插件上下文动态配置构建配置 3.1 -> 修改每个hvigorNode中的build-profile.json5 3.2 -> 修改module.json5中的配置信息 3.3 -&g…

Android View事件分发机制详解

Android 的 View 事件分发机制是处理用户触摸&#xff08;Touch&#xff09;事件的核心流程&#xff0c;它决定了触摸事件如何从系统传递到具体的 View 并被消费。理解这个机制对于处理复杂的触摸交互、解决滑动冲突至关重要。 核心思想&#xff1a;责任链模式 事件分发遵循一个…

【CMake】自定义package并通过find_package找到

在一些场景下我们需要编写一些库&#xff0c;并希望其他程序可以找到这些库并引用。 CMake采用package这个概念来解决这个问题。 关于CMake的find_package文章有很多&#xff0c;但这些文章的内容大多不直观讲了一堆讲不到点子上&#xff0c;让人看了一头雾水。因此我想通过本文…

【MATLAB例程】AOA与TDOA混合定位例程,适用于二维环境、3个锚点的定位|附代码下载链接

本 MATLAB 程序实现了基于 Angle of Arrival (AOA) 与 Time Difference of Arrival (TDOA) 的二维定位方法&#xff0c;通过自适应融合与最小二乘优化&#xff0c;实现对未知目标的高精度估计。本例中固定使用了 3 个基站&#xff08;锚点&#xff09;&#xff0c;算法框架支持…

磐维数据库panweidb集中式集群配置VIP【添加、删除和修改】

0 说明 panweidb集中式集群为了防止主备切换后应用连接无法切换到新主库&#xff0c;需要配置vip&#xff0c;应用可以只通过该ip与数据库连接&#xff0c;不用感知数据库在哪个节点上。 panweidb中配置 VIP主要依赖 CM 组件的 VIP 仲裁功能&#xff0c;通过回调脚本在主备切换…

python的保险业务管理与数据分析系统

前端开发框架:vue.js 数据库 mysql 版本不限 后端语言框架支持&#xff1a; 1 java(SSM/springboot)-idea/eclipse 2.NodejsVue.js -vscode 3.python(flask/django)–pycharm/vscode 4.php(thinkphp/laravel)-hbuilderx 数据库工具&#xff1a;Navicat/SQLyog等都可以 保险行业…

R语言如何接入实时行情接口

目录 1. 安装必要的R包 2. 导入库 3. 连接WebSocket 4. 处理连接成功后的操作 5. 处理接收到的消息 6. 处理连接关闭和错误 7. 发送心跳数据 8. 自动重连机制 9. 启动连接和重连 总结 在数据分析和金融研究中&#xff0c;实时行情数据的获取至关重要&#xff0c;但市…

Redis数据安全性分析

Redis高可用与数据安全机制深度解析前置知识&#xff1a;Redis基础安装与使用&#xff08;主从复制、哨兵集群、Cluster集群搭建&#xff09;一、Redis性能压测工具 工具名称&#xff1a;redis-benchmark核心作用&#xff1a;快速基准测试Redis性能使用场景&#xff1a;评估不同…

差分和前缀和

差分和前缀和的原理、用法和区别。前缀和&#xff08;Prefix Sum&#xff09;核心思想&#xff1a;预处理数组的前缀和&#xff0c;快速回答「区间和查询」 适用场景&#xff1a;数组静态&#xff08;更新少、查询多&#xff09;&#xff0c;需要频繁计算任意区间的和1. 定义与…