[英]How to align HBox by using BorderPane alignment in FXML?
What am i trying is to align HBox Buttons to center in the Bottom in dialog box. 我在尝试将HBox按钮对齐到底部的对话框中心。 I want to do this in fxml.However,BorderPane alignment is working in label. 我想在fxml中执行此操作。但是,BorderPane对齐在标签中工作。 Here is code from my side.I think BorderPane.alignment="BOTTOM_CENTER" must work even if the tag is Bottom. 这是我方的代码。我认为即使标签是Bottom,BorderPane.alignment =“BOTTOM_CENTER”也必须正常工作。
Class file: 班级档案:
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 file: 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>
The BorderPane.alignment
static property only makes sense for nodes whose parent is a BorderPane
. BorderPane.alignment
静态属性仅对父级为BorderPane
节点有意义。 The Button
s defined in your FXML file have an HBox
as a parent, so setting the BorderPane.alignment
property on the buttons will have no effect. FXML文件中定义的Button
有一个HBox
作为父项,因此在按钮上设置BorderPane.alignment
属性将不起作用。
You can achieve the desired effect by centering the buttons within the HBox
, simply by using the alignment
property of the HBox
(which positions the HBox
's child nodes within its bounds): 可以实现通过居中内的按钮所需的效果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>
This gives 这给了
The reason that the Label
needs BorderPane.alignment="CENTER"
but the HBox
needs alignment="CENTER"
is because they have different resizable ranges , and in particular their max widths are different. Label
需要BorderPane.alignment="CENTER"
但HBox
需要alignment="CENTER"
的原因是因为它们具有不同的可调整范围 ,特别是它们的最大宽度不同。 The max width of a label, by default, is its preferred width, whereas the max width of an HBox
is infinite. 默认情况下,标签的最大宽度是其首选宽度,而HBox
的最大宽度是无限大。 You can see this by setting background colors on them both: 你可以通过在它们上面设置背景颜色来看到这一点:
<Label text="this is dialogbox"
BorderPane.alignment="TOP_CENTER"
style="-fx-background-color: aquamarine;"/>
<!-- ... -->
<HBox spacing="10" alignment="CENTER"
style="-fx-background-color: lightskyblue;">
The alignment
property positions the content of a node within its bounds. alignment
属性将节点的内容定位在其边界内。 Since the label has no extra space within its bounds for the text to be positioned, with the default settings the alignment
property will have no effect. 由于标签在其文本边界内没有额外空间,因此使用默认设置时, alignment
属性将不起作用。 On the other hand, the label is less wide than the top region of the border pane, so there is room to position it within that region. 另一方面,标签不如边框窗格的顶部区域宽,因此有空间将其定位在该区域内。 The BorderPane.alignment="CENTER"
attribute centers the entire label within the top region of the border pane. BorderPane.alignment="CENTER"
属性将整个标签置于边框窗格的顶部区域中。
By contrast, the HBox
itself already fills the entire width of the bottom region of the border pane. 相比之下, HBox
本身已经填充了边框窗格底部区域的整个宽度。 So there is no additional space to align it within that region, and so for the HBox
, setting BorderPane.alignment="CENTER"
will have no effect. 因此,在该区域内没有额外的空间来对齐它,因此对于HBox
,设置BorderPane.alignment="CENTER"
将不起作用。 On the other hand, there is more space in the HBox
itself than is needed for the buttons, so the buttons (the content of the HBox
) can be aligned within the HBox
itself using the alignment="CENTER"
property of the HBox
. 在另一方面,存在越多的空间HBox
本身比所需的按钮,所以按钮(的内容HBox
)可以在范围内排列HBox
自身使用alignment="CENTER"
的财产HBox
。
If you want, you can change the max widths to achieve the same effect. 如果需要,可以更改最大宽度以达到相同的效果。 For example: 例如:
<?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>
allows the label to grow (like the default for the HBox
), so now its alignment
property has the desired effect: 允许标签增长(就像HBox
的默认值),所以现在它的alignment
属性具有所需的效果:
or 要么
<?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>
makes the HBox
behave like the button, so now its BorderPane.alignment
gives the desired effect: 使HBox
表现得像按钮,所以现在它的BorderPane.alignment
提供了所需的效果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.