当前位置: 首页 > news >正文

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

http://www.dtcms.com/a/270565.html

相关文章:

  • Flutter基础(前端教程⑥-按钮切换)
  • 《重构项目》基于Apollo架构设计的项目重构方案(多种地图、多阶段、多任务、状态机管理)
  • 【教程】在ubuntu安装Edge浏览器
  • 工业通讯网关在电子制造中的核心作用——从DeviceNet到Modbus TCP的智能转换
  • 家庭网络中的服务器怎么对外提供服务?
  • 跨平台ROS2视觉数据流:服务器运行IsaacSim+Foxglove本地可视化全攻略
  • 【网络】Linux 内核优化实战 - net.ipv4.tcp_dsack
  • NHibernate案例
  • scp:上传大型数据集到实验室服务器
  • 2025年人工智能、虚拟现实与交互设计国际学术会议
  • 蛋白质序列-kappa参数计算算法解读
  • Linux——I/O复用
  • django 一个表中包括id和parentid,如何通过parentid找到全部父爷id
  • 微信小程序91~100
  • 什么是高防 IP?从技术原理到实战部署的深度解析
  • 制作MikTex本地包可用于离线安装包
  • springBoot使用XWPFDocument 和 LoopRowTableRenderPolicy 两种方式填充数据到word模版中
  • ARM单片机滴答定时器理解与应用(一)(详细解析)
  • Node.js 是什么?npm 是什么? Vue 为什么需要他们?
  • CVE-2025-32463复现
  • ✍️ Python 批量设置 Word 文档多级字体样式(标题/正文/名称/小节)
  • PHP 基于模板动态生成 Word 文档:图片 + 表格数据填充全方案(PHPOffice 实战)
  • 使用python 将多个docx文件合并为一个word
  • 【Unity】MiniGame编辑器小游戏(十)连连看【Link】
  • 实时地震分析:AI+Python如何帮我们提前感知大地的怒吼?
  • 使用 Docker 搭建 Go Web 应用开发环境——AI教你学Docker
  • NO.1数据结构绪论|数据结构|逻辑结构|物理结构|算法|算法的度量
  • 从救火到赋能:运维的职责演进与云原生时代的未来图景
  • 聚铭安全管家平台2.0实战解码 | 安服篇(二):无人值守自动化封禁
  • 【Unity】MiniGame编辑器小游戏(十一)消消乐【Crush】