抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

一、基本介绍

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 可以传任意属性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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.选择/取消事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 属性不能同时设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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属性设置边框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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自定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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),
),
];
},
);
}

评论