Flutter学习-18- 微信项目学习-聊天页面数据处理

1. PopupMenuButton

导航栏我们之前学习了添加事件，leading和acyions

实现事件的话可以手势的点击，今天我们主要学习下PopupMenuButton

其中itemBuilder是必填的相当于菜单的cell控件,我们定义下

Widget _menuItemBuilder(String imageName,String title,) {
  return Container(
    child: Row(
      children: [
        Image.asset(imageName,width: 20,),
        Text(title,style: TextStyle(fontSize: 14,color: Colors.white),)
      ],
    ),
  );
  
  
}

PopupMenuButton的itemBuilder返回的是个数组，我们使用PopupMenuItem

child: PopupMenuButton(
    color: Colors.black,
  itemBuilder: (BuildContext context){
    return <PopupMenuItem<String>>[
      PopupMenuItem(
          child: _menuItemBuilder('images/发起群聊.png', '发起群聊')),
      PopupMenuItem(
          child: _menuItemBuilder('images/添加朋友.png', '添加朋友')),
      PopupMenuItem(
          child: _menuItemBuilder('images/扫一扫1.png', '扫一扫')),
      PopupMenuItem(
          child: _menuItemBuilder('images/收付款.png', '收付款')),
    ];

  }

调整下menu的距离和背景，再调整下item图片和文字的间距。

2. 准备网络数据

我们可以自定义数据请求，数据库地址

新建接口

我们编辑接口进入后 我们返回data名称的数组，设定50条，添加姓名，和内容以及头像其中 @cname随机姓名， @cparagraph随机段落内容

生成的数据规则在 Mock查看。

头像地址

使用新窗口打开一个头像，我们只要转换这个index就能达到不同头像了。

@natural(10,60)我们取10到60的随机照片

3. 网络请求

我们使用系统的网络请求http，查看 Pub上的http

我们复制最上面的http: ^0.13.4打开我们的pubspec.yaml

记得对齐，put get后就可以使用了。 我们打开我们之前编辑好的接口，复制这个url

导入头

import 'package:http/http.dart' as http;

我们在initState调用，这里使用异步请求async

Future<void> getListData()
 async {
   final url = Uri.parse('http://rap2api.taobao.org/app/mock/293940/home/chat/list');
   // var response = http.
  var response = await http.get(url);
  print('respose code is = ${response.statusCode}');
  print('respose body is = ${response.body}');
   
 }
@override void initState() {
  // TODO: implement initState
  super.initState();
  getListData();
}