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

「这是我参与11月更文应战的第16天，活动概况检查：2021最后一次更文应战」。

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();
}