JavaFX中的按钮对齐方式 [英] Button alignment in JavaFX

问题描述

我使用关闭按钮创建了这个JavaFX对话框：

I created this JavaFX dialog with Close button:

final int xSize = 300;
final int ySize = 280;
final Color backgroundColor = Color.WHITE;
final String text = "SQL Browser Version 1.0";

final Stage aboutDialog = new Stage();
aboutDialog.initModality(Modality.WINDOW_MODAL);

Button closeButton = new Button("Close");
closeButton.setAlignment(Pos.BOTTOM_CENTER);

closeButton.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent arg0) {
        aboutDialog.close();
    }
});

Scene aboutDialogScene = new Scene(VBoxBuilder.create()
    .children(new Text(text), closeButton)
    .alignment(Pos.CENTER)
    .padding(new Insets(10))
    .build(), xSize, ySize, backgroundColor);

aboutDialog.setScene(aboutDialogScene);
aboutDialog.show();

我想在对话框底部显示按钮。我用它来设置对齐：
closeButton.setAlignment（Pos.BOTTOM_CENTER）; 但由于某种原因，按钮显示在对话框的中心。你能告诉我怎么解决这个问题吗？

I want to display the button at the bottom of the dialog. I used this to set the alignment: closeButton.setAlignment(Pos.BOTTOM_CENTER); but for some reason the button is displayed at the center of the dialog. Can you tell me how I can fix this?

推荐答案

如果你想使用 VBox ，方法您正在寻找的是：

If you want to use a VBox for this, the method you are looking for is:

VBox.setVgrow（node，Priority.ALWAYS）;

默认情况下，VBox只会将孩子从左上角放在另一个之下你放了它。除非您对具有无限最大高度的孩子设置Vgrow约束，否则孩子不会展开以填充所有可用的垂直区域。

By default a VBox will just place children one under the other from the top left of where you place it. The children don't expand to fill all of the available vertical area, unless you set a Vgrow constraint on a child with an unbounded max height.

您可以通过几种不同的方式可以得到你寻求的布局（还有其他布局）：

A few different ways you can get the layout you seek (there are others as well):

1. 使用 StackPane 而不是 VBox 并将您的按钮与 StackPane.setAlignment（closeButton，Pos.BOTTOM_CENTER）对齐;


2. 使用 AnchorPane 而不是 VBox 并设置<$ c的约束$ c> AnchorPane 相应。


3. 使用弹簧区域，这是一个空的区域，可以扩展以填充空白区域。

1. Use a StackPane instead of a VBox and align your button with StackPane.setAlignment(closeButton, Pos.BOTTOM_CENTER);
2. Use an AnchorPane instead of a VBox and set constraints on the AnchorPane appropriately.
3. Use a spring region which is an empty Region which expands to fill empty space.

---

弹簧区域示例：

---

Sample spring region:

Region topSpring    = new Region();
Region bottomSpring = new Region();
Scene aboutDialogScene = new Scene(VBoxBuilder.create()
        .children(topSpring, new Text(text), bottomSpring, closeButton)
        .alignment(Pos.CENTER)
        .padding(new Insets(10))
        .build(), xSize, ySize, backgroundColor);
VBox.setVgrow(topSpring, Priority.ALWAYS);
VBox.setVgrow(bottomSpring, Priority.ALWAYS);

---

调用 closeButton.setAlignment （Pos.BOTTOM_CENTER）; 设置closeButton中事物（文本和图形）的对齐方式，而不是closeButton在其父级内的对齐方式（这是你真正想要的）。

---

Calling closeButton.setAlignment(Pos.BOTTOM_CENTER); sets the alignment of things (text and graphic) within the closeButton, not the alignment of the closeButton within it's parent (which is what you really want).

为了解布局约束的工作原理， SceneBuilder 是一个很好的工具，可以和 ScenicView 可以帮助调试现有代码中的布局问题。

For understanding how layout constraints work, SceneBuilder is a good tool to play around with and ScenicView can help debug layout issues in existing code.

以下是布局的一些FXML示例您可以加载到SceneBuilder中以查看不同的布局选项如何工作。

Here are a few FXML samples of your layout that you can load up into SceneBuilder to see how the different layout options work.

如果您愿意，可以使用JavaFX API轻松地在普通java中编写以下所有示例。我用fxml编写它们，因为它使布局很容易在SceneBuilder中预览。

All of the samples below can easily be written in plain java using the JavaFX API if you prefer. I wrote them in fxml as it makes the layouts easy to preview in SceneBuilder.

使用StackPane的FXML示例：

FXML sample using a StackPane:

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<StackPane id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="280.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Label text="SQL Browser Version 1.0" />
    <Button mnemonicParsing="false" text="Button" StackPane.alignment="BOTTOM_CENTER" />
  </children>
  <padding>
    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
  </padding>
</StackPane>

与一些春季区域相同：

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<VBox alignment="CENTER" prefHeight="280.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Region prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS" />
    <Label text="SQL Browser Version 1.0" />
    <Region prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS" />
    <Button mnemonicParsing="false" text="Close" />
  </children>
</VBox>

同样的事情，标签本身设置为扩展以填充VBox中的空白区域：

And the same thing with the label itself set to expand to fill empty space in the VBox:

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<VBox alignment="CENTER" prefHeight="280.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Label maxHeight="1.7976931348623157E308" text="SQL Browser Version 1.0" VBox.vgrow="ALWAYS" />
    <Button mnemonicParsing="false" text="Close" />
  </children>
  <padding>
    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
  </padding>
</VBox>

这篇关于JavaFX中的按钮对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！