现在的问题 窗口放大按钮的位置离方块的间距有点远 应该怎么解决?

Question

 @Override
    public void start(Stage primaryStage) {
        // 创建第一个 WebView 实例用于加载 index.html
        WebView webView1 = new WebView();

        // 获取本地 HTML 文件 index.html 的路径
        URL indexUrl1 = getClass().getResource("index.html");
        if (indexUrl1 == null) {
            System.err.println("Cannot find /web/index.html");
            return;
        }

        // 加载 index.html 到第一个 WebView
        webView1.getEngine().load(indexUrl1.toExternalForm());

        // 创建根布局
        StackPane root = new StackPane();

        // 创建黑色小方块
        Rectangle square = new Rectangle();
        square.setFill(Color.BLACK);
        square.getStyleClass().add("left-square");  // 为小方块添加样式类
        square.setVisible(isSquareVisible); // 设置小方块初始不可见

        // 将小方块的尺寸绑定到根布局
        square.widthProperty().bind(Bindings.multiply(root.widthProperty(), 0.25));
        square.heightProperty().bind(Bindings.multiply(root.heightProperty(), 1));

        // 将小方块放置在左上角
        StackPane.setAlignment(square, Pos.TOP_LEFT);

        // 创建一个新的 StackPane 来管理按钮
        StackPane buttonPane = new StackPane();
        Button toggleButton = new Button(isSquareVisible ? "折叠" : "展开");
        toggleButton.getStyleClass().add("toggle-button");  // 添加样式类
        buttonPane.getChildren().add(toggleButton);

        // 将按钮所在的 StackPane 添加到根布局
        root.getChildren().addAll(webView1, square, buttonPane);

        // 设置按钮始终位于左边，并绑定其位置到方块的宽度
        buttonPane.translateXProperty().bind(square.widthProperty().add(-370));
        buttonPane.translateYProperty().bind(Bindings.multiply(root.heightProperty(), 0.02));

        // 为按钮的点击事件添加动作
        toggleButton.setOnAction(event -> {
            isSquareVisible = !isSquareVisible;
            square.setVisible(isSquareVisible);
            toggleButton.setText(isSquareVisible ? "折叠" : "展开");
            isButtonClicked = true; // 按钮被点击时设置标志位
        });

        // 创建场景并设置根布局大小
        Scene scene = new Scene(root, 800, 450);

Answer 1

引自免费微信小程序：皆我百晓生

为了解决窗口放大按钮与方块间的间距问题，我们可以调整buttonPane的位置绑定。目前，按钮的位置是绑定到方块的宽度并有一个固定的偏移量（-370）。然而，这个固定的偏移量可能不适应所有窗口大小。我们可以使用锚布局来确保按钮始终在方块的右侧并保持固定的间距。以下是修改后的代码：

// ... 其他代码保持不变 ...

// 创建按钮所在的 StackPane 并使用锚布局来固定按钮的位置
StackPane buttonPane = new StackPane();
Button toggleButton = new Button(isSquareVisible ? "折叠" : "展开");
toggleButton.getStyleClass().add("toggle-button");  // 添加样式类
buttonPane.getChildren().add(toggleButton);

// 使用锚布局将按钮固定在方块的右侧，并保持一定的间距
AnchorPane.setRightAnchor(buttonPane, 5.0);  // 设置右侧间距为5像素
AnchorPane.setTopAnchor(buttonPane, 20.0);  // 设置顶部间距为20像素，可以根据需要调整

// 将方块和按钮的容器添加到根布局
root.getChildren().addAll(webView1, square, buttonPane);

// ... 其他代码保持不变 ...

在这里，我们使用AnchorPane来代替StackPane来管理按钮的位置。通过设置setRightAnchor和setTopAnchor，我们可以确保按钮始终位于方块的右侧和顶部，并保持固定的间距。你可以根据需要调整这些间距值。这种布局方式可以适应不同大小的窗口。