阅读 105 SEO

Flutter实战-搭建微信项目(六)

PopupMenuButton

今天来到了第一个页面,聊天页面。之前在AppBar添加actions有点击事件使用的是GestureDetectoronTap.今天介绍另外一个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,            ),        ),      )    ], ), 复制代码

运行之后效果长这样:

image.png

网络数据准备

前面介绍的都是本地数据,现在要开始网络数据请求了呢,想想都有点小激动。不过由于没有服务器,我们可以Mock一些虚拟数据,介绍几个实用的网站:

  • 数据库

  • Mock

  • 虚拟用户信息

  • Dart安装包

打开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安装完成之后就可以使用了!这个库也介绍了比较详细的用法

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

image.png


作者:weak_PG
链接:https://juejin.cn/post/7029590546293194760


文章分类
代码人生
文章标签
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐