JavaFX 上下文菜单尺寸调整详解

2024-12-26 11:08:39

调整 JavaFX 上下文菜单尺寸

在 JavaFX 开发中，上下文菜单（ContextMenu）的视觉呈现是个重要部分。用户体验直接受菜单外观的影响。有时，开发者可能需要精确调整菜单尺寸，使之更贴近目标设计，例如原生操作系统应用程序的菜单样式。这篇文章探讨调整上下文菜单尺寸的几种方法。

CSS 调整上下文菜单尺寸

使用 CSS 是一种常见且灵活的方式来控制 JavaFX 组件样式，这自然也适用于上下文菜单。通常情况下，可以轻松修改菜单的背景颜色、突出显示颜色及位置。然而，直接通过 CSS 调整其整体尺寸并非总是如预期般有效。特别是在处理诸如ChoiceBox等组件的上下文菜单时，仅通过标准 CSS 选择器可能无法达到精准控制宽度的目标。

例如，以下 CSS 代码片段能调整一些基本的菜单样式：

.context-menu {
    -fx-background-color: #f0f0f0;
}

.menu-item:focused {
    -fx-background-color: #e0e0e0;
}

但以上代码无法直接改变菜单的宽度。这时就需要进一步探索其他的调整方式。

宽度调整

可以通过操作菜单中的MenuItem元素的样式实现调整菜单宽度的目标，原理是通过设置足够宽的菜单项强制撑开整个菜单的宽度，比如设置MenuItem的min-width属性，并使所有的MenuItem保持相同的min-width。

代码示例：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ContextMenuWidth extends Application {

    @Override
    public void start(Stage primaryStage) {
        ChoiceBox<String> choiceBox = new ChoiceBox<>();
        choiceBox.getItems().addAll("选项 1", "选项 2", "一个比较长的选项 3");

        ContextMenu contextMenu = new ContextMenu();
        for (String item : choiceBox.getItems()) {
            MenuItem menuItem = new MenuItem(item);
            menuItem.setMinWidth(150); // 设置菜单项的最小宽度，从而控制菜单整体宽度
             contextMenu.getItems().add(menuItem);

        }


       choiceBox.setOnMouseClicked(e -> {

          if (!contextMenu.isShowing())
          {
               contextMenu.show(choiceBox, e.getScreenX(), e.getScreenY());
          }

       });



        VBox vbox = new VBox(choiceBox);
        Scene scene = new Scene(vbox, 300, 250);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

这里需要注意的是 setMinWidth()方法，确保了菜单项具有了指定的最小宽度，使整体菜单的宽度适配。如果所有菜单项使用了相同的最小宽度值，就能够实现统一宽度显示的效果。实际开发中可以根据需要计算出一个合适的宽度值。

高度调整

菜单高度调整相对直接。高度主要受MenuItem的数量及每个菜单项的字体大小和内边距的影响。通常，并不需要直接调整菜单的高度，通过调整每个MenuItem高度就能改变总高度。
可以使用 CSS 调整菜单项的内边距和高度:

.menu-item {
  -fx-padding: 5 10 5 10; /* 上右下左内边距 */
  -fx-pref-height: 25; /* 首选高度，可以设置一个高度使得上下文菜单的行高增加 */
}

也可以通过代码调整MenuItem的prefHeight属性达到相同的目的，效果与使用css一致，示例代码如下:

 menuItem.setPrefHeight(30);

检查标记样式修改

直接修改上下文菜单中的检查标记形状稍微复杂，因为默认的检查标记并非使用 CSS 直接控制。尽管可以通过 Menu 或 CheckMenuItem 的 setGraphic() 方法来设置自定义节点 (比如 SVGPath)，这并不等同于直接修改原有的标记形状，而更像是替换。

如下代码片段，可以将上下文菜单中的勾选标记设置为自定义SVG:

   CheckMenuItem checkItem = new CheckMenuItem("可勾选项");
    String svgPathContent = "M2 11.149l3.964 3.964 8.036-8.036";

        SVGPath svg = new SVGPath();
         svg.setContent(svgPathContent);
        svg.setFill(Color.BLACK); //勾选图标的颜色
       svg.setStroke(Color.BLACK); //描边的颜色

         checkItem.setGraphic(svg);


     contextMenu.getItems().add(checkItem);