标签对齐方式很奇怪

Question

I have a panel that contains two labels. Such panels are used in a statistics block as "name:value". But name's length is different for every entry and UI looks ugly at the end. I decided to get the size of the biggest label and set setPrefWidth() for all labels in the column to that size. But UI starts looking weird at the end.

Here is what I have:

Here is the code of such panel:

public class StatLine extends HBox {
    private Label name;
    private Label value;

    public StatLine(String name) {
        super();
        this.name = new Label(name);
        this.value = new Label("99999");

        this.name.setPrefWidth(25);

        this.getChildren().addAll(this.name, this.value);
    }
}

Without setPrefWidth() , my result now is the following:

Name1: 99999     Name3: 99999
Long Name: 99999 Name31: 99999
Name2: 99999     Longest3: 99999

The result I want to get at the end:

Name1:     99999   Name3:    99999
Long Name: 99999   Name31:   99999
Name2:     99999   Longest3: 99999

How can I achieve this?

Answer 1

You can use a GridPane to lay out the data like a table. This will automatically adjust the cell widths to match the longest field.