如果未包装，JavaFX 标签不会居中

Question

我在 JavaFX 标签中遇到了一系列非常奇怪的文本换行和居中对齐情况。我确信我做错了什么或不明智，但我似乎无法弄清楚我做错了什么。

基本上，我试图将标题放在平铺 Pane 上，并使该标题居中。另外，当调整窗口大小时，我希望标题换行。当标题没有换行时(例如:一行)，它不再居中，就会出现奇怪的情况。一旦它包裹起来，它就会再次居中。下面是一些产生效果的示例代码:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.TilePane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import org.apache.commons.lang.RandomStringUtils;
public class Foo extends Application
{
    @Override
    public void start(Stage primaryStage) throws Exception
    {
        TilePane panel = new TilePane();
        panel.setTileAlignment(Pos.CENTER_LEFT);

        for (int i = 0; i < 25; i++)
        {
            panel.getChildren().add(new Label(RandomStringUtils.randomAlphabetic(10)));
        }

        Label title = new Label("Lorem ipsum dolor sit amet, consectetur adipiscing elit");
        title.setStyle("-fx-font-size: 16; -fx-font-weight: bold; -fx-wrap-text:true; -fx-text-alignment: center -fx-border-color:black;");
        title.minWidthProperty().bind(Bindings.add(-30, primaryStage.widthProperty()));
        title.setTextAlignment(TextAlignment.CENTER);

        VBox box = new VBox(title, panel);
        box.setPadding(new Insets(10));

        primaryStage.setScene(new Scene(box, 400, 400));
        primaryStage.show();

    }

    public static void main(String[] args)
    {
        launch(args);
    }
}

这是我所看到的屏幕截图。在第一个中，顶部的粗线居中并包裹。在第二个中，顶部的粗线没有换行，而是左对齐。

Answer 1

如 documentation 中所述，文本对齐方式控制多行文本的对齐方式。这正是指定的行为。

如果您想象一个包围所有文本的矩形，那么当文本有多行时，必​​须决定如何在该矩形内布局这些单独的行。这是由 textAlignment 控制的属性(property)。默认设置是将每行与该框的左侧对齐:您还可以居中、右对齐或对齐(展开每行以填充框)。另一种思考方式是 textAlignment仅控制每行文本相对于其他文本行的位置。

另一方面，alignment属性定义如果标签中的空间多于文本占用的空间，则标签内容(文本和图形)如何在标签本身内对齐。因此，要将标签置于 VBox 的中心您首先需要确保标签填充 VBox 的完整宽度，然后需要设置alignment属性至CENTER 。您可以通过设置 maxWidth 来执行前者。标签，使其无限增长，并设置 fillWidth() VBox的属性(property)至true 。

使用 Java 这看起来像

public void start(Stage primaryStage) throws Exception
{
    TilePane panel = new TilePane();
    panel.setTileAlignment(Pos.CENTER_LEFT);

    for (int i = 0; i < 25; i++)
    {
        panel.getChildren().add(new Label(randomAlphabetic(10)));
    }

    Label title = new Label("Lorem ipsum dolor sit amet, consectetur adipiscing elit");
    title.setStyle("-fx-font-size: 16; -fx-font-weight: bold; -fx-wrap-text:true; -fx-border-color:black;");

        title.setPadding(new Insets(5));
        title.setAlignment(Pos.CENTER);
        title.setMaxWidth(Double.MAX_VALUE);


    title.setTextAlignment(TextAlignment.CENTER);

    VBox box = new VBox(title, panel);
    box.setFillWidth(true); 

    box.setPadding(new Insets(10));

    primaryStage.setScene(new Scene(box, 400, 400));
    primaryStage.show();

}

如果您愿意，您可以在 CSS 中设置这些属性:

@Override
public void start(Stage primaryStage) throws Exception
{
    TilePane panel = new TilePane();
    panel.setTileAlignment(Pos.CENTER_LEFT);

    for (int i = 0; i < 25; i++)
    {
        panel.getChildren().add(new Label(randomAlphabetic(10)));
    }

    Label title = new Label("Lorem ipsum dolor sit amet, consectetur adipiscing elit");
    title.setStyle("-fx-font-size: 16; -fx-font-weight: bold; -fx-wrap-text:true; -fx-border-color:black;"
            + "-fx-text-alignment: center; -fx-alignment: center; -fx-max-width:Infinity; -fx-padding: 5;");


    VBox box = new VBox(title, panel);
    box.setFillWidth(true); // or box.setStyle("-fx-fill-width: true ;")

    box.setPadding(new Insets(10));

    primaryStage.setScene(new Scene(box, 400, 400));
    primaryStage.show();

}