当前位置: 首页 > 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.lryc.cn/news/583177.html

相关文章:

  • 【数字后端】- Standard Cell Status
  • SQLZoo 练习与测试答案汇总(复杂题有最优解与其他解法分析、解题技巧)
  • Java 各集合接口常用方法对照表
  • 解决SQL Server SQL语句性能问题(9)——SQL语句改写(7)
  • 如何识别SQL Server中需要添加索引的查询
  • nl2sql的解药pipe syntax
  • Linux入门篇学习——Linux 编写第一个自己的命令
  • 一天一道Sql题(day04)
  • 详解Kafka重平衡机制详解
  • Vue+ElementUI聊天室开发指南
  • Vue3 Element plus table有fixed列时错行
  • 7.神经网络基础
  • 【深度学习】【入门】Sequential的使用和简单神经网络搭建
  • 【机器学习】BeamSearch算法
  • 华为OD机试_2025 B卷_观看文艺汇演问题(Python,100分)(附详细解题思路)
  • 七牛云C++开发面试题及参考答案
  • Vue 3 中父子组件双向绑定的 4 种方式
  • mysql互为主从失效,重新同步
  • qml加载html以及交互
  • HarmonyOS中各种动画的使用介绍
  • C语言extern的用法(非常详细,通俗易懂)
  • 〔从零搭建〕数据湖平台部署指南
  • 17.Spring Boot的Bean详解(新手版)
  • OpenCV颜色矩哈希算法------cv::img_hash::ColorMomentHash
  • STM32-待机唤醒实验
  • [Leetcode] 预处理 | 多叉树bfs | 格雷编码 | static_cast | 矩阵对角线
  • User手机上如何抓取界面的布局uiautomatorviewer
  • 【机器人】Aether 多任务世界模型 | 4D动态重建 | 视频预测 | 视觉规划
  • 速卖通跨境运营破局:亚矩阵云手机如何用“本地化黑科技”撬动俄罗斯市场25%客单价增长
  • React 编译器与性能优化:告别手动 Memoization