Flutter学习笔记（五）聊天界面：PopupMenu，ListView的使用以及简单聊天布局

距离上一次更新也过了一段时间了，期间忙着学车去了，现在有空再来写一篇。

PopupMenu的使用

为什么要用这个PopupMenu呢，因为大多数消息界面的右上角，都会有一个设置的选项，而这个选项最常用的就是通过PopupMenu来实现。首先来看一下效果图：

类似于这样的情况，然后来看代码：

  new PopupMenuButton(
       
       icon: Icon(Icons.settings),
       
       itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
       new PopupMenuItem<String>(
            value: "2",child: new Text("全部已读",style: new TextStyle(fontSize: 14)),),
       new PopupMenuItem(
            value:"1",child: new Text("接受但不提醒",style: new TextStyle(fontSize: 14))),
       new PopupMenuItem(
            value:"0",child: new Text("接受并提醒",style: new TextStyle(fontSize: 14),)),
            ],
       onSelected: (String value){
   
         setState(() {
   
            _model = value;
          });
        },
    ),

这个按钮的图标是可以自定义的，然后弹出的选项也可以有很多自定义的样式。注意在选中之后要通过setState()来改变值。

ListView的使用

从上面的图种可以看出，这个消息界面的主题是一个ListView，较为常用的除了普通的ListView，还有ListView.builder和ListView.separated，这几个的区别在于，ListView这种方式适合只有少量的子组件的情况，因为这种方式需要将所有children都提前创建好；而ListView.builder适合列表项比较多（或者无限）的情况，因为只有当子组件真正显示的时候才会被创建；最后一个ListView.separated可以在生成的列表项之间添加一个分割组件，它比ListView.builder多了一个separatorBuilder参数，该参数是一个分割组件生成器。
但是，仅仅是一个简单的列表还是不够的，我们需要给每个item绑定上一个点击事件，跳转到聊天的界面，具体的做法也很简单，就是将整个item包在一个GestureDetector里，然后就可以调用它的onTap,onDoubleTap,onLongPress等一系列跟手势有关的方法。
这还不够，flutter还提供了一个滑动删除item的方法，就是让整个ItemBuilder返回一个Dismissible，然后根据传递的参数index，删除所选的这一行。
下面是实现的代码：

//分割线
Widget divider = Divider(color: Colors.black12, height: 1.0, indent: 18,);

......

//构造带有分割线的ListView
ListView.separated(
   itemCount: _message.length,
   separatorBuilder: (BuildContext context, int index) {
   
    return divider;
   },
   itemBuilder: (context, index) => EachItem(_message[index],_message,index),)
   
//构造每一个Item的类
class EachItem extends StatelessWidget{
   

  final Message message;
  final List<Message> _message;