flutter 弹出菜单按钮组件PopupMenuButton、弹出菜单组件方法showMenu-蒲公英云

flutter 弹出菜单按钮组件PopupMenuButton、弹出菜单组件方法showMenu

快来打我* 2021-07-24 17:03 1522阅读 0赞

弹出菜单按钮组件:
    不能设置位置,点击按钮后从按钮的地方展开菜单,会覆盖按钮
         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:<PopupMenuEntry>[
                  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: <Widget>[
                // Image.asset("images/lt3.png",height: 35,width: 35,),
                // Text("发起群聊",style: TextStyle(color: Colors.white),)
                // ],
                // ),
                // ),
                // )
          // ];
          // },
          // icon:Icon(Icons.add_circle_outline),
          // )
        ],
      ),
      body: Text('微信'),
    );
  }
}