![](/img/trans.png)
[英]How to place elements proportionally in the HBox/VBox using javafx/fxml
[英]How to align HBox by using BorderPane alignment in FXML?
我在尝试将HBox按钮对齐到底部的对话框中心。 我想在fxml中执行此操作。但是,BorderPane对齐在标签中工作。 这是我方的代码。我认为即使标签是Bottom,BorderPane.alignment =“BOTTOM_CENTER”也必须正常工作。
班级档案:
package application;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class HBoxDialog extends Application {
@Override
public void start(Stage primaryStage) {
try {
Parent root = FXMLLoader.load(getClass().getResource("HBoxDialog.fxml"));
primaryStage.setScene(new Scene(root, 500, 100));
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
FXML文件:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">
<top>
<Label text="this is dialogbox" BorderPane.alignment="TOP_CENTER"/>
<font>
<Font size="35"/>
</font>
</top>
<bottom>
<HBox spacing="10">
<Button text="Okay" prefWidth="90" BorderPane.alignment="BOTTOM_CENTER"/>
<Button text="Cancel" prefWidth="90" BorderPane.alignment="BOTTOM_CENTER"/>
<Button text="Help" prefWidth="90" BorderPane.alignment="BASELINE_RIGHT"/>
</HBox>
</bottom>
</BorderPane>
BorderPane.alignment
静态属性仅对父级为BorderPane
节点有意义。 FXML文件中定义的Button
有一个HBox
作为父项,因此在按钮上设置BorderPane.alignment
属性将不起作用。
可以实现通过居中内的按钮所需的效果HBox
,简单地通过使用alignment
的的属性HBox
(其定位所述HBox
其范围内的子节点):
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">
<top>
<Label text="this is dialogbox"
BorderPane.alignment="TOP_CENTER" />
<font>
<Font size="35" />
</font>
</top>
<bottom>
<HBox spacing="10" alignment="CENTER">
<Button text="Okay" prefWidth="90" />
<Button text="Cancel" prefWidth="90" />
<Button text="Help" prefWidth="90" />
</HBox>
</bottom>
</BorderPane>
这给了
Label
需要BorderPane.alignment="CENTER"
但HBox
需要alignment="CENTER"
的原因是因为它们具有不同的可调整范围 ,特别是它们的最大宽度不同。 默认情况下,标签的最大宽度是其首选宽度,而HBox
的最大宽度是无限大。 你可以通过在它们上面设置背景颜色来看到这一点:
<Label text="this is dialogbox"
BorderPane.alignment="TOP_CENTER"
style="-fx-background-color: aquamarine;"/>
<!-- ... -->
<HBox spacing="10" alignment="CENTER"
style="-fx-background-color: lightskyblue;">
alignment
属性将节点的内容定位在其边界内。 由于标签在其文本边界内没有额外空间,因此使用默认设置时, alignment
属性将不起作用。 另一方面,标签不如边框窗格的顶部区域宽,因此有空间将其定位在该区域内。 BorderPane.alignment="CENTER"
属性将整个标签置于边框窗格的顶部区域中。
相比之下, HBox
本身已经填充了边框窗格底部区域的整个宽度。 因此,在该区域内没有额外的空间来对齐它,因此对于HBox
,设置BorderPane.alignment="CENTER"
将不起作用。 在另一方面,存在越多的空间HBox
本身比所需的按钮,所以按钮(的内容HBox
)可以在范围内排列HBox
自身使用alignment="CENTER"
的财产HBox
。
如果需要,可以更改最大宽度以达到相同的效果。 例如:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.Double?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">
<top>
<Label text="this is dialogbox"
alignment="CENTER"
style="-fx-background-color: aquamarine;">
<maxWidth>
<Double fx:constant="MAX_VALUE"/>
</maxWidth>
</Label>
<font>
<Font size="35" />
</font>
</top>
<bottom>
<HBox spacing="10" alignment="CENTER"
style="-fx-background-color: lightskyblue;">
<Button text="Okay" prefWidth="90" />
<Button text="Cancel" prefWidth="90" />
<Button text="Help" prefWidth="90" />
</HBox>
</bottom>
</BorderPane>
允许标签增长(就像HBox
的默认值),所以现在它的alignment
属性具有所需的效果:
要么
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Region?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">
<top>
<Label text="this is dialogbox"
BorderPane.alignment="CENTER"
style="-fx-background-color: aquamarine;" />
<font>
<Font size="35" />
</font>
</top>
<bottom>
<HBox spacing="10" BorderPane.alignment="CENTER"
style="-fx-background-color: lightskyblue;">
<maxWidth>
<Region fx:constant="USE_PREF_SIZE" />
</maxWidth>
<Button text="Okay" prefWidth="90" />
<Button text="Cancel" prefWidth="90" />
<Button text="Help" prefWidth="90" />
</HBox>
</bottom>
</BorderPane>
使HBox
表现得像按钮,所以现在它的BorderPane.alignment
提供了所需的效果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.