正如标题所示,我创建了一个根 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>
最佳答案
对我来说效果很好(直到我调整窗口大小以使场景小于根的首选大小)。请注意,您还没有在那里生成响应式布局。
如果您想将所有内容包装在 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
中剩余的空间。
关于java - 如何使 AnchorPane 在另一个 AnchorPane 内圆角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59324844/