JavaFX菜单ContextMenu使用

左手的ㄟ右手 2022-06-09 00:22 356阅读 0赞

在开发应用的过程中。想做一个类似下面截图的功能，点击菜单按钮之后，在下面显示下拉面板（该截图是华为Hisuite客户端）。

![20170823000111941][]

通过ContextMenu可以实现该功能，首先定义GlobalMenu，继承ContextMenu，显示这些功能选项

package com.nii.desktop.widget.menu;
    
    import javafx.scene.control.ContextMenu;
    import javafx.scene.control.MenuItem;
    
    /**
     * Created by wzj on 2017/8/22.
     */
    public class GlobalMenu extends ContextMenu
    {
        /**
         * 单例
         */
        private static GlobalMenu INSTANCE = null;
    
        /**
         * 私有构造函数
         */
        private GlobalMenu()
        {
            MenuItem settingMenuItem = new MenuItem("设置");
            MenuItem updateMenuItem = new MenuItem("检查更新");
            MenuItem feedbackMenuItem = new MenuItem("官方论坛");
            MenuItem aboutMenuItem = new MenuItem("问题与建议");
            MenuItem companyMenuItem = new MenuItem("关于");
    
    
            getItems().add(settingMenuItem);
            getItems().add(updateMenuItem);
            getItems().add(companyMenuItem);
            getItems().add(feedbackMenuItem);
            getItems().add(aboutMenuItem);
        }
    
        /**
         * 获取实例
         * @return GlobalMenu
         */
        public static GlobalMenu getInstance()
        {
            if (INSTANCE == null)
            {
                INSTANCE = new GlobalMenu();
            }
    
            return INSTANCE;
        }
    }

假设该菜单按钮是menuButton，设置按钮点击事件，点击之后，把该GloriaMenu显示在按钮的下面就可以了。

/**
         * 菜单点击事件
         */
        public void menuButtonClickAction()
        {
            menuButton.setOnMouseClicked(new EventHandler<MouseEvent>()
            {
                @Override
                public void handle(MouseEvent event)
                {
                    GlobalMenu.getInstance().show(menuButton, Side.BOTTOM,0,0);
                }
            });
        }

下面是我写的demo截图：

![20170823000932325][]

[20170823000111941]: /images/20220609/1da5ec76e6b74ebd84e5e4518ef4b059.png
[20170823000932325]: /images/20220609/9526520f944640c8a37eabc4d9aaa1a5.png