PopupMenuButton

今天来到了第一个页面，聊天页面。之前在AppBar添加actions有点击事件使用的是GestureDetector的onTap�.今天介绍另外一个PopupMenuButton

  • offset：可以自定义偏移的距离
  • itemBuilder：是一个需要返回一个指定类型的数组typedef PopupMenuItemBuilder<T> = List<PopupMenuEntry<T>> Function(BuildContext context);
  • child:响应的按钮
  1. appBar: AppBar(
  2.   title: Text('微信'),
  3.   centerTitle: true,
  4.   actions: [
  5.     Container(
  6.       margin: EdgeInsets.only(right: 10),
  7.       child: PopupMenuButton(
  8.         color: Color.fromRGBO(1, 1, 1, 0.5),
  9.         offset: Offset(0, 60),
  10.         itemBuilder: (BuildContext context) {
  11.           return [
  12.             PopupMenuItem(
  13.                  child: _MenuItemBuilder('images/发起群聊.png', '发起群聊')),
  14.             PopupMenuItem(
  15.                  child: _MenuItemBuilder('images/添加朋友.png', '添加朋友')),
  16.             PopupMenuItem(
  17.                  child: _MenuItemBuilder('images/扫一扫1.png', '扫一扫')),
  18.             PopupMenuItem(
  19.                  child: _MenuItemBuilder('images/收付款.png', '收付款')),
  20.                 ];
  21.               },
  22.           child: Image.asset(
  23.             'images/圆加.png',
  24.              width: 30,
  25.            ),
  26.        ),
  27.      )
  28.    ],
  29. ),

image.png

网络数据准备

现在正是开始涉及到网络请求了，打开RAP模拟数据这个网址，注册之后新建仓库
image.png
新建接口：
image.png
编辑接口信息：
image.png
这里我没有加参数，直接返回的响应内容为一个数组
image.png
后面的规则的话可以在Mock这里找到，图片的话是在模拟用户信息的网站这里找到的，图片url最后一位的编号（20-70）对应的是不同的模拟用户的头像。有了这些模拟的数据，我们就能开始使用网络请求啦。

网络请求

这里介绍的是http，在Pub上搜索http
image.png
有个复制按钮，复制之后直接在pubspec.yaml里导入这个库，最新的版本是^0.13.4
image.png
点击Pub get安装完成之后就可以使用了！这个库也介绍了比较详细的用法

  1.   @override
  2.   void initState() {
  3.     // TODO: implement initState
  4.     super.initState();
  5.     // 获取数据
  6.     getData();
  7.   }
  9.   getData() async {
  10.     final url =
  11.         Uri.parse('http://rap2api.taobao.org/app/mock/293759/home/chat/list');
  12.     var response = await http.get(url);
  13.     print('Response status: ${response.statusCode}');
  14.     print('Response body: ${response.body}');
  15.   }

async表示异步执行这个方法，iOS中使用的是block的回调表明网络数据回来，这里相对比较简单，使用一个关键字await就表示数据回来后的操作。
image.png