如果未包裝，JavaFX標簽不會居中

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

如文檔中所述，文本對齊方式控制多行文本的對齊方式。 這正是指定的行為。

如果您想象一個矩形來限制所有文本，則當文本有多行時，必​​須決定這些單獨的行在該矩形中的布局方式。 這由textAlignment屬性控制。 默認是將每行對齊到該框的左側：您還可以居中，右對齊或對齊（展開每行以填充框）。 另一種思考的方式是textAlignment僅控制文本的每一行相對於其他文本行的位置 。

另一方面，如果標簽中的空間比文本占用的空間大， alignment屬性將定義標簽內容（文本和圖形）如何在標簽本身內對齊。 因此， VBox標簽在VBox居中，首先需要確保標簽充滿VBox的整個寬度，然后需要將alignment屬性設置為CENTER 。 您可以通過設置標簽的maxWidth使其無限期地增大，並將VBox的fillWidth()屬性設置為true來true fillWidth() 。

使用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的更多信息，請參見此鏈接 。 標簽的寬度也很重要，否則寬度將僅是文本的長度，並且沒有什么可以真正居中。

進行更改，您的代碼將如下所示

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