Flutter实战-搭建微信项目（六）

「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

`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就表示数据回来后的操作。