Question

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

Java代码：

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文件中的Scene Builder完成的

FXML代码：

<?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>

Project Image

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中剩余的空间。

如何使AnchorPane在另一个AnchorPane中变圆

1 个答案: