Flutter组件之PopupMenuButton

一、基本介绍

PopupMenuButton 是一个非常常见的弹出菜单栏。

1.PopupMenuButton属性介绍

PopupMenuButton属性	介绍
itemBuilder	必填配置弹出菜单的子控件
initialValue	设置弹出菜单的高亮item
onSelected	点击菜单控件
onCanceled	取消点击菜单控件
tooltip	长按时的小提示
elevation	阴影距离
padding	外边距，默认 EdgeInsets.all(8.0),
child	子控件
icon	图标
iconSize	图标大小，默认24
offset	偏移量，默认 Offset.zero,
enabled	是否可点击，默认为 true,
shape	边框设置
color	颜色
enableFeedback	会传给Tooltip和IconButton

2.PopupMenuItem属性介绍

PopupMenuItem属性	介绍
value	点击时带入到点击事件的值
child	必填,子控件
enabled	是否可以点击，默认为 true
height	高度，默认为 kMinInteractiveDimension
padding	内边距
textStyle	字体样式
mouseCursor	鼠标光标

二、组件用法

1.基本用法

PopupMenuItem.value 可以传任意属性值。

import 'package:flutter/material.dart';
class PopupMenuButtonPage extends StatefulWidget{
  @override
  FMPopupMenuButtonState createState() => FMPopupMenuButtonState();
}

class FMPopupMenuButtonState extends State <FMPopupMenuButtonVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("IconButton"),
        actions: [_popupMenuButton(context)],
      ),
    );
  }

  PopupMenuButton _popupMenuButton(BuildContext context){
    return PopupMenuButton(
      itemBuilder: (BuildContext context){
        return [
          PopupMenuItem(child: Text("深色模式"),value: "dark",),
          PopupMenuItem(child: Text("To English"),value: ["to", "english"],),
        ];
      },
    );
  }
}

2.选择/取消事件

PopupMenuButton _popupMenuButton(BuildContext context){
  return PopupMenuButton(
    itemBuilder: (BuildContext context){
      return [
        PopupMenuItem(child: Text("深色模式"),value: "dark",),
        PopupMenuItem(child: Text("To English"),value: ["to", "english"],),
      ];
    },
    onSelected: (dynamic value){
      print(value);
    },
    onCanceled: (){
      print("canceled");
    },
  );
}

3.颜色、图标、子控件

icon 与 child 属性不能同时设置。

PopupMenuButton _popupMenuButton(BuildContext context){
  return PopupMenuButton(
    itemBuilder: (BuildContext context){
      return [
        PopupMenuItem(child: Text("深色模式"),value: "dark",),
        PopupMenuItem(child: Text("To English"),value: ["to", "english"],),
      ];
    },
    color: Colors.red,
    // icon: Icon(Icons.more_horiz),
    child: Center(
      child: Text("More"),
    ),
  );
}

4.边框形状

通过shape属性设置边框。

PopupMenuButton _popupMenuButton(BuildContext context){
  return PopupMenuButton(
    itemBuilder: (BuildContext context){
      return [
        PopupMenuItem(child: Text("深色模式"),value: "dark",),
        PopupMenuItem(child: Text("To English"),value: ["to", "english"],),
      ];
    },
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
      side: BorderSide(
        width: 3,
        color: Colors.black,
        style: BorderStyle.solid,
      ),
    ),
  );
}

5.PopupMenuItem自定义

PopupMenuButton _popupMenuButton(BuildContext context){
  return PopupMenuButton(
    itemBuilder: (BuildContext context){
      return [
        PopupMenuItem(
          child: Text("深色模式"),
          value: "dark",
          height: 100
        ),
        PopupMenuItem(
          child: Text("To English"),
          value: ["to", "english"],
          textStyle: TextStyle(color: Colors.red),
        ),
      ];
    },
  );
}