5 4 月 2026, 周日

Flutter PopupMenuButton弹出菜单按钮组件

属性 类型 描述
itemBuilder List<PopupMenuEntry<T>> Function(BuildContext context) 在按下按钮以创建要显示在菜单中的项目时调用。
initialValue T 初始选中值,菜单项的值(如果有),应在菜单打开时突出显示。
onSelected void Function(T value) 当用户从此按钮创建的弹出菜单中选择一个值时调用。如果在没有选择值的情况下关闭弹出菜单,则会调用 [onCanceled]。
onCanceled void Function() 当用户在没有选择项目的情况下关闭弹出菜单时调用。如果用户选择一个值,则会调用 [onSelected]。
tooltip String 描述按下按钮时将发生的操作的文本。当用户长按按钮时会显示此文本并用于辅助功能。
elevation double 打开时放置菜单的 z 坐标。这控制了菜单下方阴影的大小。默认为 8,弹出菜单的适当高度。
padding EdgeInsetsGeometry
默认值:const EdgeInsets.all(8.0)
默认匹配 IconButton 的 8 dps 填充。在某些情况下,特别是在此按钮显示为列表项的尾随元素的情况下,能够将填充设置为零很有用。
child Widget 设置子组件,设置子组件时不能设置icon属性
icon Widget 图标组件
iconSize double 图标大小。如果此属性为 null,则默认大小为 24.0 像素。
offset Offset
默认值:Offset.zero,
应用于弹出菜单按钮的偏移量。如果未设置,弹出菜单按钮将直接位于用于创建它的按钮旁边。
enabled bool 这个弹出菜单按钮是否是交互式的。必须非空,默认为 true 如果为 true,按钮将通过显示菜单来响应按下。如果为“false”,则按钮将使用当前 [Theme] 中禁用的颜色设置样式,并且不会响应按下或显示弹出菜单,并且不会调用 [onSelected]、[onCanceled] 和 [itemBuilder]。
shape ShapeBorder 形状边框,用于菜单的形状。
如果此属性为 null,则使用 [PopupMenuThemeData.shape]。如果 [PopupMenuThemeData.shape] 也为 null,则使用 [MaterialType.card] 的默认形状。此默认形状是一个矩形,边缘为 BorderRadius.circular(2.0) 的圆角。
color Color 菜单使用的背景颜色。
如果此属性为 null,则使用 [PopupMenuThemeData.color]。如果 [PopupMenuThemeData.color] 也为 null,则使用 Theme.of(context).cardColor。
enableFeedback bool 检测到的手势是否应提供声音和/或触觉反馈。例如,在 Android 上,当启用反馈时,轻按会产生咔哒声,长按会产生短暂的振动。另请参阅:[反馈] 为某些操作提供特定于平台的反馈。

itemBuilder 属性详解

          itemBuilder: (context) {
            return <PopupMenuEntry<String>>[
              PopupMenuItem<String>(
                value: '语文',
                child: Text('语文'),
              ),
              PopupMenuItem<String>(
                value: '数学',
                child: Text('数学'),
              ),
              PopupMenuItem<String>(
                value: '英语',
                child: Text('英语'),
              ),
              PopupMenuItem<String>(
                value: '生物',
                child: Text('生物'),
              ),
              PopupMenuItem<String>(
                value: '化学',
                child: Text('化学'),
              ),
            ];
          },

              //弹出菜单分隔线
              PopupMenuDivider(),
              //弹出菜单项
              PopupMenuItem<String>(
                value: '数学',
                child: Text('数学'),
              ),

initialValue 属性详解

          //初始选中
          initialValue: "语文",

onSelected 属性详解

          //输出选中的value值
          onSelected: (value) {
            print('$value');
          },

onCanceled 属性详解

          //没有选择值得时候调用
          onCanceled: () {
            print('没有选择任何值');
          },

tooltip 属性详解

          //长按弹出提示
          tooltip: '这是长按弹出提示的内容',

完整代码

 PopupMenuButton<String>(
          enabled: false,
          padding: EdgeInsets.all(0),
          //设置子组件,设置子组件的时候不能设置图标
          child: Text("点击"),
          // elevation: 55,
          //长按弹出提示
          tooltip: '这是长按弹出提示的内容',
          //设置图标
          // icon: Icon(Icons.add),
          //初始选中
          initialValue: "语文",
          //输出选中的value值
          onSelected: (value) {
            print('$value');
          },
          //没有选择值得时候调用
          onCanceled: () {
            print('没有选择任何值');
          },
          itemBuilder: (context) {
            return <PopupMenuEntry<String>>[
              PopupMenuItem<String>(
                value: '语文',
                child: Text('语文'),
              ),
              PopupMenuItem<String>(
                value: '数学',
                child: Text('数学'),
              ),
              PopupMenuItem<String>(
                value: '英语',
                child: Text('英语'),
              ),
              PopupMenuItem<String>(
                value: '生物',
                child: Text('生物'),
              ),
              PopupMenuItem<String>(
                value: '化学',
                child: Text('化学'),
              ),
            ];
          },
        ),
Avatar photo

sion932