javafx - 悬停时切换的导航侧边栏

Question

因此，在 Windows 10 中，您可以看到左侧带有图标的 Windows 菜单：

将鼠标悬停在左侧时，菜单会展开并显示文本

展开的部分覆盖了内容。

在我的应用程序中，我想使用 Javafx 和 SceneBuilder 创建这种设计。

我设法设计了按钮，就像当我将鼠标悬停在按钮上时，它将展开并显示文本，但是，我不知道如何展开包含该按钮的整个窗格。我将按钮放入 VBox 中，并给出了与按钮展开设计相同的条件，但是它不起作用。

任何帮助，尤其是示例，我们将不胜感激。

Answer 1

简单地说，您可以使用

MenuButton

和

popupSide

的

Side.TOP

。 这可能不完全是您想要的。特别是，没有“悬停时切换”功能。

该示例与 Windows 按钮和菜单的工作方式“不完全”匹配。 Windows 开始按钮有很多功能（我认为它也可以配置为以不同的方式工作）。您可能不想要所有这些功能。例如，Windows 按钮在按下按钮时会并排显示两个菜单，一个带有菜单图标，另一个带有按字母顺序排列的应用程序列表。 UI 经过优化，能够显示两者，除非您将鼠标悬停在左侧的图标上，在这种情况下，它会删除右侧的字母列表并显示图标的文本。但是，如果您只需要显示一个菜单列表（可能），那么您也可以同时显示左侧菜单的图标和文本，这就是我提供的示例的作用。

我的示例是代码形式的，但如果您想使用的话，大部分内容都会转换为 FXML 和 SceneBuilder。我使用的大多数图标都在

这个问题

中提供。

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.control.MenuButton;
import javafx.scene.control.MenuItem;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Background;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.stage.Stage;
import org.jetbrains.annotations.NotNull;

import javax.swing.text.html.CSS;
import java.util.Objects;

public class MenuApp extends Application {
    private static final String CSS = "data:text/css,.root { -fx-base: #3c3f4a; -fx-font-size: 18px; }";

    @Override
    public void start(Stage stage) {
        StackPane content = new StackPane();
        content.setPrefSize(400, 300);
        content.setBackground(createGradient());

        MenuButton windowsMenuButton = new MenuButton(
                null,
                createImageView("Dragon-icon.png")
        );
        MenuItem documents = new MenuItem(
                "Documents",
                createImageView("Medusa-icon.png")
        );
        MenuItem pictures = new MenuItem(
                "Pictures",
                createImageView("Unicorn-icon.png")
        );
        MenuItem settings = new MenuItem(
                "Settings",
                createImageView("Treant-icon.png")
        );
        MenuItem power = new MenuItem(
                "Power",
                createImageView("spaceShip.png")
        );
        windowsMenuButton.getItems().addAll(documents, pictures, settings, power);
        windowsMenuButton.setPopupSide(Side.TOP);

        windowsMenuButton.hoverProperty().addListener(new ChangeListener<Boolean>() {
            @Override
            public void changed(ObservableValue<? extends Boolean> observableValue, Boolean aBoolean, Boolean t1) {
                System.out.println(t1);
            }
        });

        HBox bottomBar = new HBox(windowsMenuButton);

        BorderPane borderPane = new BorderPane();
        borderPane.setCenter(content);
        borderPane.setBottom(bottomBar);
        borderPane.getStylesheets().add(CSS);

        stage.setScene(new Scene(borderPane));
        stage.show();
    }

    @NotNull
    private static Background createGradient() {
        return Background.fill(
                new LinearGradient(
                        0, 0, 1, 0,
                        true,
                        CycleMethod.NO_CYCLE,
                        new Stop(0, Color.LIGHTBLUE),
                        new Stop(1, Color.PALEGREEN)
                )
        );
    }

    @NotNull
    private static ImageView createImageView(String iconFilename) {
        return new ImageView(
                new Image(
                        Objects.requireNonNull(
                                MenuApp.class.getResource(
                                        iconFilename
                                )
                        ).toExternalForm(),
                        48, 48, true, true
                )
        );
    }
}

当我尝试此操作时，JavaFX 21、OS X 存在一个小错误，即我第一次单击弹出菜单时，弹出菜单没有出现在正确的位置（后续单击时显示正常）。您的结果可能会有所不同，具体取决于您的 JavaFX 版本。