首先进行网络请求配置
Flutter网络请求配置.png
进入需要进行网络请求的界面导入 “import 'package:http/http.dart' as http;”
一般网络请求在initState里面发送、具体按需求再改 下面事例参考中发请求里面的Map转模型请回看Flutter (四)Map转模型
-
方法备注 下面是具体发送网络请求代码参考
1.initState() :初始化方法-只会调用一次
2.getDatas():发送网络请求的方法
3.Widget build(BuildContext context) :渲染界面的方法
4.Widget _buildItemForRow(BuildContext context, int index) : ListView 上返回Item的方法
class _ChatPageState extends State<ChatPage> {
bool _cancelConnect = false;//防止多次请求
//初始化对象的时候只调用一次
@override
void initState() {
// TODO: implement initState
super.initState();
//.then是处理返回的数据
getDatas().then((List<Chat> datas) {
if(!_cancelConnect){
//datas 就是返回的数据
setState(() {
_datas = datas;
});
}
}).catchError((error) {
print(error);
}).whenComplete((){
print('该请求完毕');
}).timeout(Duration(seconds: 10)).catchError((timeout){//判断请求超时回调
_cancelConnect = true;
print('超时:${timeout}');
});
//Future 类似可选类型 表示接下来的值可能有值也可能有错误
Future<List<Chat>> getDatas() async {//异步请求 注意:async和await 要成对出现
_cancelConnect = false;//防止多次请求
final response = await http.get('http://rap2api.taobao.org/app/mock/224518/api/chat/list');
if(response.statusCode==200) {
//获取相应数据,并且转换成Map类型
final responseBody = json.decode(response.body);
//转换模型数组
List<Chat> chatList = responseBody['chat_list']
.map<Chat>((item) => Chat.formJson(item))
.toList();
return chatList;//数据返回
}else {
throw Exception('statusCode:${response.statusCode}');//抛请求异常
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: WeChatThemeColor,
centerTitle: true, //这个是解决安卓机型上导航标题居中显示
title: Text('Flutter Demo'),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: PopupMenuButton(
offset: Offset(0, 60.0),
child: Image(
image: AssetImage('images/圆加.png'),
width: 25,
),
itemBuilder: _buildPopupMunuItem,
),
),
], //右侧加号按钮 要加手势点击
),
body: Container(
child: _datas.length == 0
? Center(
child: Text('Loading...'),
)
: ListView.builder(
itemCount: _datas.length,
itemBuilder: _buildItemForRow,
),
),
);
}
}
//返回 ListView 上Item 的小部件
Widget _buildItemForRow(BuildContext context, int index) {
return ListTile(
title: Text(_datas[index].name),
subtitle: Container(
height: 20,
width: 20,
child: Text(
_datas[index].message,
overflow: TextOverflow.ellipsis,
),
),
leading: CircleAvatar(
backgroundImage: NetworkImage(_datas[index].imageUrl),
),
);
}
壮士且慢, 需要Demo请继续关注,后面会一起上传！！！😊 赞一下再走
重磅：
至此：感谢简友的持续关注,决定提供一份完整Flutter项目，关注下面"技高易愁"公众号获取:【Flutter项目-微信】
请关注"技高易愁"微信公众号.jpg
QQ：522608370
😊 点下赞呗！！！
Flutter （二）布局
Flutter （三） 状态管理
Flutter （四） Map转模型
Flutter （五） 网络请求
Flutter （六） 保留界面状态
Flutter （七） 混合开发 [配置]
Flutter （八） 混合开发 [Flutter完整项目嵌入到原生]
