Flutter，点击图标后，显示下拉条目选框

本文主要是介绍Flutter，点击图标后，显示下拉条目选框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这里给出两种方式，一种是点击时没有动画效果的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，点击图标后，显示下拉条目选框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---