「这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战」。
1. PopupMenuButton
导航栏我们之前学习了添加事件,leading
和acyions
实现事件的话可以手势的点击,今天我们主要学习下PopupMenuButton
其中itemBuilder
是必填的相当于菜单的cell控件,我们定义下
Widget _menuItemBuilder(String imageName,String title,) {
return Container(
child: Row(
children: [
Image.asset(imageName,width: 20,),
Text(title,style: TextStyle(fontSize: 14,color: Colors.white),)
],
),
);
}
PopupMenuButton
的itemBuilder
返回的是个数组,我们使用PopupMenuItem
child: PopupMenuButton(
color: Colors.black,
itemBuilder: (BuildContext context){
return <PopupMenuItem<String>>[
PopupMenuItem(
child: _menuItemBuilder('images/发起群聊.png', '发起群聊')),
PopupMenuItem(
child: _menuItemBuilder('images/添加朋友.png', '添加朋友')),
PopupMenuItem(
child: _menuItemBuilder('images/扫一扫1.png', '扫一扫')),
PopupMenuItem(
child: _menuItemBuilder('images/收付款.png', '收付款')),
];
}
调整下menu
的距离和背景,再调整下item
图片和文字的间距。
2. 准备网络数据
我们可以自定义数据请求,数据库地址
新建接口
我们编辑接口进入后
我们返回data
名称的数组,设定50
条,添加姓名,和内容以及头像其中 @cname
随机姓名, @cparagraph
随机段落内容
生成的数据规则在 Mock查看。
使用新窗口打开一个头像,我们只要转换这个index
就能达到不同头像了。
@natural(10,60)
我们取10到60的随机照片
3. 网络请求
我们使用系统的网络请求http
,查看 Pub上的http
我们复制最上面的http: ^0.13.4
打开我们的pubspec.yaml
记得对齐,put get
后就可以使用了。
我们打开我们之前编辑好的接口,复制这个url
导入头
import 'package:http/http.dart' as http;
我们在initState
调用,这里使用异步请求async
Future<void> getListData()
async {
final url = Uri.parse('http://rap2api.taobao.org/app/mock/293940/home/chat/list');
// var response = http.
var response = await http.get(url);
print('respose code is = ${response.statusCode}');
print('respose body is = ${response.body}');
}
@override void initState() {
// TODO: implement initState
super.initState();
getListData();
}