文章分类 其他 flutter 前端 javascript ecmascript 开发语言 阅读数 : 55 阅读时长 : 9分钟
这里给出两种方式,一种是点击时没有动画效果的Icon+GestureDetector,另一种是点击时带动画的Material Widget自带的IconButton。
第一种:
MouseRegion( // 用于鼠标移动到区域,出现小手
cursor: SystemMouseCursors.click,
child: Tooltip(
message: "页面布局",
preferBelow: false,
child: GestureDetector(
onTap: () {
showMenu<String>(
context: context,
position: const RelativeRect.fromLTRB(420, 350, 400, 0), // 下拉菜单位置
items: <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: '单页面',
child: Text('单页面'),
),
const PopupMenuItem<String>(
value: '两页面',
child: Text('两页面'),
),
const PopupMenuItem<String>(
value: '四页面',
child: Text('四页面'),
),
const PopupMenuItem<String>(
value: '六页面',
child: Text('六页面'),
),
const PopupMenuItem<String>(
value: '八页面',
child: Text('八页面'),
),
],
).then((String? value) {
if (value != null) {
print("点击了按钮");
} else {
print("点击了:$value");
}
});
},
child: Container(
width: 25,
height: 20,
child: const Icon(
Icons.view_agenda_outlined,
size: 25,
),
),
),
),
),
第二种:
IconButton(
onPressed: (){
showMenu<String>(
context: context,
position: const RelativeRect.fromLTRB(420, 350, 400, 0), // 下拉菜单位置 .shift(const Offset(0, 50))
items: <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: '单页面',
child: Text('单页面'),
),
const PopupMenuItem<String>(
value: '两页面',
child: Text('两页面'),
),
const PopupMenuItem<String>(
value: '四页面',
child: Text('四页面'),
),
const PopupMenuItem<String>(
value: '六页面',
child: Text('六页面'),
),
const PopupMenuItem<String>(
value: '八页面',
child: Text('八页面'),
),
],
).then((String? value) {
if (value != null) {
print("点击了按钮");
} else {
print("点击了:$value");
}
});
},
icon: const Icon(Icons.view_agenda_outlined),
tooltip: "页面布局",
color: Colors.black,
),
更多【flutter-Flutter,点击图标后,显示下拉条目选框】相关视频教程:www.yxfzedu.com