CSS 如何使用CSS样式化JavaFX菜单及其项

在本文中，我们将介绍如何使用CSS样式化JavaFX菜单及其项。JavaFX是一个用于构建富客户端应用程序的跨平台图形界面工具包，而CSS是一种常用的样式表语言，用于定义网页的外观和布局。

阅读更多：CSS 教程

了解JavaFX菜单的结构

在开始样式化JavaFX菜单之前，我们首先需要了解菜单的结构。JavaFX菜单由多个菜单项组成，每个菜单项都是菜单的一个子节点。菜单项可以包含文本、图标以及其他控件。以下是一个简单的JavaFX菜单的示例代码：

Menu fileMenu = new Menu("文件");

MenuItem newItem = new MenuItem("新建");
MenuItem openItem = new MenuItem("打开");
MenuItem saveItem = new MenuItem("保存");
MenuItem exitItem = new MenuItem("退出");

fileMenu.getItems().addAll(newItem, openItem, saveItem, exitItem);

MenuBar menuBar = new MenuBar();
menuBar.getMenus().add(fileMenu);

在这个示例中，我们创建了一个名为”文件”的主菜单和四个菜单项。菜单项可以通过setGraphic()方法设置图标，通过setOnAction()方法添加点击事件处理程序。

使用CSS样式化菜单

要样式化JavaFX菜单及其项，我们可以使用CSS选择器和样式规则。以下是一些常用的CSS选择器和示例样式规则：

• .menu-bar：应用于菜单栏对象
• .menu：应用于每个菜单对象
• .menu-item：应用于每个菜单项对象
• .menu-item .label：应用于每个菜单项的标签
• .menu-item .graphic：应用于每个菜单项的图标
• .menu-item:focused：应用于当前选中的菜单项

例如，如果我们想将菜单栏的背景颜色设置为红色，可以使用以下CSS代码：

.menu-bar {
    -fx-background-color: red;
}

要给菜单项添加鼠标悬停效果，可以使用以下CSS代码：

.menu-item:hover {
    -fx-background-color: lightgray;
}

我们还可以通过CSS样式设置菜单项的文本颜色、选中状态的背景颜色等等。

示例：样式化JavaFX菜单

下面是一个完整的示例，展示了如何使用CSS样式化JavaFX菜单及其项：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.MenuItem;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class StyledMenuExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建主菜单
        Menu fileMenu = new Menu("文件");

        // 创建菜单项
        MenuItem newItem = new MenuItem("新建");
        MenuItem openItem = new MenuItem("打开");
        MenuItem saveItem = new MenuItem("保存");
        MenuItem exitItem = new MenuItem("退出");

        // 将菜单项添加到主菜单
        fileMenu.getItems().addAll(newItem, openItem, saveItem, exitItem);

        // 创建菜单栏并添加主菜单
        MenuBar menuBar = new MenuBar();
        menuBar.getMenus().add(fileMenu);

        // 创建布局并将菜单栏添加到布局中
        VBox root = new VBox();
        root.getChildren().add(menuBar);

        // 创建场景并将布局添加到场景中
        Scene scene = new Scene(root, 400, 300);

        // 将CSS样式表应用于场景
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

        // 将场景设置到舞台上
        primaryStage.setScene(scene);

        // 显示舞台
        primaryStage.show();
    }

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

在上述示例中，我们创建了一个StyledMenuExample类，继承自Application，并重写了start()方法。在start()方法中，我们创建了菜单、菜单项和菜单栏，并将它们添加到布局中。然后，将布局添加到场景中，并通过getStylesheets()方法将CSS样式表应用于场景。

接下来，我们需要创建一个名为style.css的CSS样式表文件，并在其中添加我们想要的样式规则。例如，以下CSS代码将为菜单栏设置红色背景颜色，为菜单项设置悬停时的浅灰色背景颜色：

.menu-bar {
    -fx-background-color: red;
}

.menu-item:hover {
    -fx-background-color: lightgray;
}

总结

通过使用CSS样式表，我们可以轻松地样式化JavaFX菜单及其项。通过适当的CSS选择器和样式规则，我们可以自定义菜单的外观、颜色和行为。希望本文能够帮助您更好地使用CSS样式化JavaFX应用程序中的菜单。