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;
final int index