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

快来打我* 2021-07-24 17:03 1430阅读 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('微信'),
        );
      }
    }