【Flutter 实战】菜单（Menu）功能

移动开发作者： 2024-08-25 09:20:02

老孟导读：今天介绍下Flutter中的菜单功能。 PopupMenuButton 使用PopupMenuButton，点击时弹出菜单，用法如下： PopupMenuButton<Stri

PopupMenuButton<String>(
  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('化学'),];
  },)

PopupMenuButton<String>(
  initialValue: '语文',...
)

PopupMenuButton<String>(
  onSelected: (value){
    print('$value');
  },onCanceled: (){
    print('onCanceled');
  },...
)

PopupMenuButton<String>(
  tooltip: 'PopupMenuButton',...
)

PopupMenuButton<String>(
  elevation: 5,padding: EdgeInsets.all(5),color: Colors.red,...
)

PopupMenuButton<String>(
  child: Text('学科'),...
)

PopupMenuButton<String>(
	icon: Icon(Icons.add),...
)

PopupMenuButton<String>(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.red
    ),borderRadius: BorderRadius.circular(10)
  ),...
)

PopupMenuButton<String>(
  offset: Offset(0,100),itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: '语文',)

PopupMenuItem

value：当此项选中后，此值将会通过onSelected返回。
enabled：此项是否可用。
height：此项的高度
textStyle：文本样式
child：子控件。

PopupMenuButton<String>(
  onSelected: (value) {
    print('$value');
  },enabled: false,textStyle: TextStyle(color: Colors.red),height: 100,)

PopupMenuDivider

PopupMenuButton<String>(
  onSelected: (value) {
    print('$value');
  },PopupMenuDivider(),)

PopupMenuDivider(height: 50,

CheckedPopupMenuItem

PopupMenuButton<String>(
  onSelected: (value) {
    print('$value');
  },itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      CheckedPopupMenuItem(
        value: '语文',checked: true,CheckedPopupMenuItem(
        value: '数学',)

showMenu(
    context: context,position: RelativeRect.fill,items: <PopupMenuEntry>[
      PopupMenuItem(child: Text('语文')),CheckedPopupMenuItem(
        child: Text('数学'),PopupMenuItem(child: Text('英语')),]);

final PopupMenuThemeData popupMenuTheme = PopupMenuTheme.of(context);
    final RenderBox button = context.findRenderObject();
    final RenderBox overlay = Overlay.of(context).context.findRenderObject();
    final RelativeRect position = RelativeRect.fromRect(
      Rect.fromPoints(
        button.localToGlobal(widget.offset,ancestor: overlay),button.localToGlobal(button.size.bottomRight(Offset.zero),Offset.zero & overlay.size,);
    final List<PopupMenuEntry<T>> items = widget.itemBuilder(context);