如果没有包装，JavaFX Label不会居中

Question

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

基本上，我正在尝试将标题放在图块窗格上，并将该标题置于中心位置。此外，当窗口调整大小时，我想要包装标题。当标题没有被包裹时（例如：一行），它就不再是中心了。一旦它包裹起来，它就会再次集中。以下是一些产生效果的示例代码：

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财产控制的。默认设置是将每一行对齐到该框的左侧：您还可以居中，右对齐或对齐（展开每一行以填充框）。另一种思考方式是textAlignment仅控制每行文本相对于其他文本行的位置。

另一方面，如果标签中的空间多于文本占用的空间，则alignment属性定义标签（文本和图形）的内容如何在标签本身内对齐。因此，要将标签置于VBox中心，首先需要确保标签填充VBox的整个宽度，然后您需要将alignment属性设置为CENTER。你通过设置标签的maxWidth来使前者无限增长，并将fillWidth()的VBox属性设置为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();

}

Answer 2

好吧，我尝试了一些不同的策略，我用常规的CSS来解决它。你可以使用“-fx-alignment：center;”去做吧。有关使用哪种css的更多信息，请参阅this link。标签的宽度也很重要，否则宽度只是文本的长度，没有什么可以真正居中。

进行更改后，您的代码将如下所示

@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-alignment: center; -fx-border-color:black;");
    title.setMinWidth(400); //This is important, else the width will just be the text's length

    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);
}