Flutter —— 聊天界面
首先做的事右上角的按钮,右上角要弄一个menu,那么这里可以在AppBar的actions添加Flutter封装好的控件PopupMenuButton,用一个container包着调整位置,然后用offset调整自身的位置。
actions: [
Container(child:
PopupMenuButton(
itemBuilder: (BuildContext context) {
return <PopupMenuItem<String>>[
PopupMenuItem(child: Text("发起群聊")),
PopupMenuItem(child: Text("发起群聊")),
PopupMenuItem(child: Text("发起群聊")),
];
},
child: Image(
image: AssetImage('images/圆加.png'),
width: 25,
),
offset: Offset(0,60)
),
margin: EdgeInsets.only(right: 10),),
color: Color.fromRGBO(1, 1, 1, 0.65),),
],
创建一个_buildPopupMenuItem来快速创建PopupMenuItem.
Widget _buildPopupMenuItem(String imgAsset, String title) {
return Row(
children: [
Image(
image: AssetImage(imgAsset),
width: 20,
),
SizedBox(width: 20,),
Text(title,style: TextStyle(color:Colors.white),),
],
);
}
在PopupMenuButton中使用。
child: PopupMenuButton(
itemBuilder: (BuildContext context) {
return <PopupMenuItem<String>>[
PopupMenuItem(
child: _buildPopupMenuItem('images/发起群聊.png', '发起群聊')),
PopupMenuItem(
child: _buildPopupMenuItem('images/添加朋友.png', '添加朋友'),
),
PopupMenuItem(
child: _buildPopupMenuItem('images/扫一扫1.png', '扫一扫'),
),
PopupMenuItem(
child: _buildPopupMenuItem('images/收付款.png', '/收付款')),
];
},
接下来要模拟网络请求。去http://rap2.taobao.org/创建一个仓库。
之后点击新建接口。
输入相应的内容
创建好之后