java - 如何使 AnchorPane 在另一个 AnchorPane 内圆角

Question

正如标题所示，我创建了一个根 AnchorPane，其中放置了两个 AnchorPane，上部 AnchorPane 以某种方式变得圆滑，但在下部 AnchorPane 的情况下，上侧是圆角的，而下侧则保持边缘。

Java Code:

package application;

import javafx.application.*;
import javafx.event.*;
import javafx.fxml.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;

public class Main extends Application {
    private double xOffset = 0;
    private double yOffset = 0;
    public void start(Stage primaryStage) 
    {
        try 
        {
            primaryStage.initStyle(StageStyle.TRANSPARENT);
            AnchorPane root = FXMLLoader.load(getClass().getResource("load.fxml"));
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            scene.setFill(javafx.scene.paint.Color.TRANSPARENT);
            primaryStage.setScene(scene);

            primaryStage.show();

            root.setOnMousePressed(new EventHandler<MouseEvent>() 
            {
                public void handle(MouseEvent e)
                {
                    xOffset = e.getSceneX();
                    yOffset = e.getSceneY();

                }
            });

            root.setOnMouseDragged(new EventHandler<MouseEvent>() 
            {
                public void handle(MouseEvent e) 
                {
                    primaryStage.setX(e.getScreenX() - xOffset);
                    primaryStage.setY(e.getScreenY() - yOffset);
                }
            });

        }
        catch(Exception e) 
        {
            e.printStackTrace();
        }
    }

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

大部分设计部分是使用 fxml 文件中的场景生成器完成的

FXML Code:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane fx:id="root" prefHeight="452.0" prefWidth="362.0" style="-fx-background-color: transparent; -fx-background-radius: 30; -fx-border-radius: 30;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="70.0" prefWidth="362.0" style="-fx-background-color: #3D4956; -fx-background-radius: 30; -fx-border-radius: 30;" />
      <AnchorPane fx:id="pg1" layoutY="80.0" prefHeight="373.0" prefWidth="362.0" style="-fx-background-color: #3D4956; -fx-background-radius: 30;" />
   </children>
</AnchorPane>

Answer 1

对我来说效果很好(直到我调整窗口大小以使场景小于根的首选大小)。请注意，您还没有在那里生成响应式布局。

如果您想将所有内容包装在 AnchorPane 中，请将 layoutY="80.0" 替换为 AnchorPane.topAnchor="80"AnchorPane.bottomAnchor="0 " 并且底部的 AnchorPane 在垂直调整窗口大小时会缩小/增大。

请注意，有一种更简单的方法可以使用 AnchorPane 生成这种布局(响应式版本):只需使用 VBox:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>

<VBox fx:id="root" spacing="10" prefHeight="452.0" prefWidth="362.0" style="-fx-background-color: transparent; -fx-background-radius: 30; -fx-border-radius: 30;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="70.0" style="-fx-background-color: #3D4956; -fx-background-radius: 30; -fx-border-radius: 30;" />
      <AnchorPane fx:id="pg1" VBox.vgrow="ALWAYS" style="-fx-background-color: #3D4956; -fx-background-radius: 30;" />
   </children>
</VBox>

VBox.vgrow="ALWAYS" 导致第二个 AnchorPane 增长到 VBox 中剩余的空间。