flutter 从接口获取json数据显示到页面
2024-08-21 09:35:54
如题，在前端，是个很简单的ajax请求，json的显示，取值都很方便，换用dart之后，除了层层嵌套写的有点略难受之外，还有对json的使用比js要麻烦
1. 可以参照 flutter-go 先封装一下get和post请求，net_utils.dart
2. 发起请求
import 'package:flutter/material.dart';
import 'package:app/api/main.dart';
import 'package:app/utils/net_utils.dart';
import 'package:fluttertoast/fluttertoast.dart'; class SearchPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _SearchPageState();
}
} class _SearchPageState extends State<SearchPage> {
TextEditingController _searchController = new TextEditingController(); List _lists = [];
List _histryLists = []; @override
void initState() {
super.initState();
this._hotSearch(); // 这里，在页面初始化的时候请求列表接口
} void _hotSearch() {
NetUtils.get('http://localhost:3000/search').then((res) => { // 这里get后面是根据前面封装的请求来写的，自行替换url和参数
// print( res['data'])
setState(() {
_lists = res['data']; // 把从接口获取的列表赋值到_list
})
});
} void updateSearch(String keyword) {
print(keyword);
setState(() {
_searchController.text = keyword; // 这个点击搜索把值赋值到input搜索框的
});
} void _searchMusic(){ // 点击搜索
if(_searchController.text==''){
Fluttertoast.showToast(
msg: "关键词不能为空",
gravity: ToastGravity.CENTER,
timeInSecForIos: 1,
);
}else{
NetUtils.get(Api.searchApi(), {"keywords":_searchController.text}).then((res) => {
print(res['result']['songs'])
});
}
} Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextFormField(
autofocus: true,
controller: _searchController,
style:TextStyle(color: Colors.white),
decoration: InputDecoration.collapsed(
hintText: "请输入关键词",
hintStyle: TextStyle(color: Colors.white70)),
),
actions: <Widget>[
//导航栏右侧菜单
IconButton(
icon: Icon(Icons.search, color: Colors.white),
onPressed: () {
_searchMusic();
}),
],
),
body: Container(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('历史记录'),
Icon(IconData(0xe662, fontFamily: 'iconfont')),
],
),
SizedBox(
width: 350.0,
height: 50.0,
child:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _histryLists.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Padding(
padding: EdgeInsets.all(5.0),
child: Chip(
label: Text(_histryLists[index]),
),
),
onTap: () => {
updateSearch(_histryLists[index])
},
);
},
)),
Padding(
padding: EdgeInsets.only(top: 30, bottom: 20),
child: Column(
children: <Widget>[
Row(
children: <Widget>[Text('热搜榜')],
),
SizedBox(
height: 520.0,
child: ListView.builder( // 这里把从接口请求的列表数据展示到页面上
shrinkWrap: true,
itemCount: _lists.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Padding(
padding: EdgeInsets.all(10),
child: Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
flex: 1,
child: Text(
(index + 1).toString(),
style: TextStyle(
color: Colors.red, fontSize: 18),
)),
Expanded(
flex: 8,
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
_lists[index]['searchWord'],
style: TextStyle(
color: Colors.grey[900],
fontSize: 16)),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
_lists[index]['content'],
style: TextStyle(
color: Colors.grey[500])),
),
],
),
)
],
),
),
onTap: () =>
updateSearch(_lists[index]['searchWord']),
);
}),
)
],
),
)
],
)),
);
}
}
更多详细请看：https://github.com/leitingting08/NeteaseCloudMusicFlutter/blob/master/lib/pages/home/search.dart
最新文章
- JS策略模式
- （原）Java初始化过程
- .NET4.0 __doPostBack未定义
- mybaits in
- 人机接口设备攻击（HID Attack）
- poj 1847 最短路简单题，dijkstra
- 卡牌手游源码《暗黑世界V1.3》数据库表说明文档！！！
- display:inline,display:inline-block,display:block 区别
- 关于找工作（二 Cover Letter）
- Linq To sql入门练习 Lambda表达式基础
- 转：【Java并发编程】之十六：深入Java内存模型——happen-before规则及其对DCL的分析（含代码）
- 1.3：Render Pipeline and GPU Pipeline
- 关于 tlb 文件
- C++学习之回调函数
- git中设置http代理和取消http代理
- Oracle创建视图的一个问题
- 关注的Elasticsearch大牛博客
- UVa 1620 懒惰的苏珊（逆序数）
- [学习笔记]SiftGPU入门
- hdoj 4272 LianLianKan 数据太水