Flutter实战-搭建微信项目（六）
PopupMenuButton
今天来到了第一个页面，聊天页面。之前在AppBar添加actions有点击事件使用的是GestureDetector的onTap.今天介绍另外一个PopupMenuButton
offset：可以自定义偏移的距离itemBuilder：是一个需要返回一个指定类型的数组typedef PopupMenuItemBuilder<T> = List<PopupMenuEntry<T>> Function(BuildContext context);child: 响应的按钮
appBar: AppBar( title: Text('微信'), centerTitle: true, actions: [ Container( margin: EdgeInsets.only(right: 10), child: PopupMenuButton( color: Color.fromRGBO(1, 1, 1, 0.5), offset: Offset(0, 60), itemBuilder: (BuildContext context) { return [ PopupMenuItem( child: _MenuItemBuilder('images/发起群聊.png', '发起群聊')), PopupMenuItem( child: _MenuItemBuilder('images/添加朋友.png', '添加朋友')), PopupMenuItem( child: _MenuItemBuilder('images/扫一扫1.png', '扫一扫')), PopupMenuItem( child: _MenuItemBuilder('images/收付款.png', '收付款')), ]; }, child: Image.asset( 'images/圆加.png', width: 30, ), ), ) ], ), 复制代码运行之后效果长这样：
网络数据准备
前面介绍的都是本地数据，现在要开始网络数据请求了呢，想想都有点小激动。不过由于没有服务器，我们可以Mock一些虚拟数据，介绍几个实用的网站：
数据库
Mock
虚拟用户信息
Dart安装包
打开RAP数据库这个网址，注册之后新建仓库
接着新建接口：
编辑接口信息：
这里我没有加参数，直接返回的响应内容为一个数组
后面初始值的规则都可以在Mock这里找到，图片的话是在模拟用户信息的网站这里找到的，图片url最后一位的编号（20-70）对应的是不同的模拟用户的头像。有了这些模拟的数据，我们就能开始使用网络请求啦。
网络请求
这里介绍的是http，在Pub上搜索http
有个复制按钮，复制之后直接在pubspec.yaml里导入这个库，最新的版本是^0.13.4
点击Pub get安装完成之后就可以使用了！这个库也介绍了比较详细的用法
@override void initState() { // TODO: implement initState super.initState(); // 获取数据 getData(); } getData() async { final url = Uri.parse('http://rap2api.taobao.org/app/mock/293759/home/chat/list'); var response = await http.get(url); print('Response status: ${response.statusCode}'); print('Response body: ${response.body}'); } 复制代码async表示异步执行这个方法，iOS中使用的是block的回调表明网络数据回来，这里相对比较简单，使用一个关键字await就表示数据回来后的操作。
作者：weak_PG
链接：https://juejin.cn/post/7029590546293194760