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