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

弹出菜单按钮组件:
	不能设置位置,点击按钮后从按钮的地方展开菜单,会覆盖按钮
	
	     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('微信'),
    );
  }
}

发布了670 篇原创文章 · 获赞 4 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/105624240