弹出菜单按钮组件:
不能设置位置,点击按钮后从按钮的地方展开菜单,会覆盖按钮
PopupMenuButton(
itemBuilder: (context){
return [
PopupMenuItem( 菜单内容
value, 点击后回调中传递的值
height : kMinInteractiveDimension, 设置高度
textStyle,
child: 组件内容,
),
];
},
icon:Icon(Icons.add_circle_outline),
)
弹出菜单组件方法:
在回调函数中触发,可以设置位置
showMenu(
context: context,
position: RelativeRect.fromLTRB(500,75, 10, 0), 设置位置
items:[
PopupMenuItem( 菜单内容
value, 点击后回调中传递的值
height : kMinInteractiveDimension, 设置高度
textStyle,
child: 组件内容,
),
]
);
代码示例:
import 'package:flutter/material.dart';
class Wx extends StatefulWidget {
@override
_AppsState createState() => _AppsState();
}
class _AppsState extends State<Wx> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
centerTitle: true,
title: Text('微信'),
actions: <Widget>[
GestureDetector(
child:Padding(
padding: EdgeInsets.only(right: 10),
child:Icon(Icons.add_circle_outline) ,
),
//点击加号出现弹框
onTap: (){
showMenu(
context: context,
position: RelativeRect.fromLTRB(500,75, 10, 0),
items:<PopupMenuEntry>[
PopupMenuItem(
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
child: Image.asset("images/lt3.png",height: 35,width: 35,),
padding: EdgeInsets.only(right: 5),
),
Padding(
child: Text("发起群聊",style: TextStyle(color: Colors.white,fontSize: 22),),
padding: EdgeInsets.only(left: 5,bottom: 5),
),
],
),
),
),
]
);
},
)
//按钮弹出组件
// PopupMenuButton(
// itemBuilder: (context){
// return [
// PopupMenuItem(
// child: Card(
// child: Row(
// children: [
// Image.asset("images/lt3.png",height: 35,width: 35,),
// Text("发起群聊",style: TextStyle(color: Colors.white),)
// ],
// ),
// ),
// )
// ];
// },
// icon:Icon(Icons.add_circle_outline),
// )
],
),
body: Text('微信'),
);
}
}