Flutter之网络请求和数据解析&&FutureBuilder渲染页面

一、网络请求和数据解析

Future: 是与异步操作一起工作的核心类，它表示未来某个时间可能出现的可用值或错误
http.Response 包含一个成功的http拿到的请求数据

• 如何用http库做Get请求
• 如何用http库做Post请求
• 如何将response转换成Dart Object
• 如何将请求结果展示在界面上

1.准备网络数据和下载依赖

前后端分离，做测试很方便

相关网站

• 模拟后台数据
• 图片素材
• Mock语法糖
• 接口返回案例

打开Dart.page 搜索 http

https://pub.dev
https://pub.dev/packages/http

导入工程

• 包服务于 Dart-
• 插件依赖于原生

flutter 导入package

image

安装依赖

#cd 到根目录执行以下代码
flutter packages get

2.使用http 请求数据

1.导入http package

import 'dart:convert';//数据解析和模型互转
import 'package:http/http.dart' as http;//http库

2.请求数据(getDatas)

Future> getDatas() async {

 //await 等到 http.get 拿到响应之后再执行其他代码
 final response = await http.get('http://rap2api.taobao.org/app/mock/225870/api/chat/list');
 if (response.statusCode == 200){
   //获取响应数据，并且转换成Map类型
   final responseBody = json.decode(response.body);
   //转换模型数组
   List chatList = responseBody['chat_list']
       .map((item) => Chat.fromJson(item))
       .toList();
   //print('chatList$chatList');
   return chatList;
 }else {
   throw Exception('statusCode:${response.statusCode}');
 }
}

3.json -> Map -> 模型

• 小型项目：手动序列化
• 大型项目：借助插件：json_serializable和built_value

简单数据解析

final chat = {
  'name' : '张三',
  'message' : '吃饭了吗？',
};
//map 转json
final chatJson = json.encode(chat);
print('chat_json:$chatJson');//chat_json:{"name":"张三","message":"吃饭了吗？"}
//json 转 map
final newChat = json.decode(chatJson);
print(newChat is Map);
print('newChat:$newChat');//newChat:{name: 张三, message: 吃饭了吗？}
//map 转模型
Chat chatModel = Chat.fromJson(newChat);
print('name:${chatModel.name} message:${chatModel.message}');

Chat 模型

class Chat {
  final String name;
  final String message;
  final String imageUrl;
  Chat({this.name, this.message, this.imageUrl});
  //类似于initWithJson
  factory Chat.fromJson(Map json) {
    return Chat(
      name: json['name'],
      message: json['message'],
      imageUrl: json['imageUrl'],
    );
  }
}

---

复杂JSON解析

复杂JSON解析

改成Final

改成Final

在线Json转Dart

{
    "status": true,
    "msg": {
        "id": 399,
        "name": "Steven"
    }
}

https://javiercbk.github.io/json_to_dart/

显示效果如图下

在线Json转Dart

二、利用FutureBuilder渲染界面

• AsyncSnapshot 异步快照
• snapShot.connectionState 连接状态 waiting 和 done
• ListTile ->列表平铺页

const ListTile({
    Key key,
    this.leading,              // item 前置图标
    this.title,                // item 标题
    this.subtitle,             // item 副标题
    this.trailing,             // item 后置图标
    this.isThreeLine = false,  // item 是否三行显示
    this.dense,                // item 直观感受是整体大小
    this.contentPadding,       // item 内容内边距
    this.enabled = true,
    this.onTap,                // item onTap 点击事件
    this.onLongPress,          // item onLongPress 长按事件
    this.selected = false,     // item 是否选中状态
})

关键代码

body: FutureBuilder(
    future: getDatas(),
    builder: (BuildContext context,AsyncSnapshot snapShot){
     print('data:${snapShot.data}');
     print('connectionState:${snapShot.connectionState}');
     if(snapShot.connectionState == ConnectionState.waiting){
       return Text('Loading...');
     }else {
       return ListView(
         children: snapShot.data.map(
             (item){
               return ListTile(
                 title: Text(item.name),
                 subtitle: Container(height: 20,width: 20,child: Text(item.message,overflow: TextOverflow.ellipsis,),),
                 leading: CircleAvatar(
                   backgroundImage: NetworkImage(item.imageUrl),
                 ),
               );
             }
         ).toList(),
       );
     }

    },
  )

效果图

FutureBuilder