Flutter PopupMenuButton弹出菜单按钮组件

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

itemBuilder 属性详解

图片[2]-Flutter PopupMenuButton弹出菜单按钮组件-趙哥博客-赵哥博客
          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 属性详解

图片[3]-Flutter PopupMenuButton弹出菜单按钮组件-趙哥博客-赵哥博客
          //初始选中
          initialValue: "语文",

onSelected 属性详解

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

onCanceled 属性详解

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

tooltip 属性详解

图片[4]-Flutter PopupMenuButton弹出菜单按钮组件-趙哥博客-赵哥博客
          //长按弹出提示
          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('化学'),
              ),
            ];
          },
        ),
THE END
喜欢就支持一下吧
点赞11赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容