Question

我有两个不同的Label，一个大的显示更改文本，另一个小的显示%符号，并且必须较小。

我在GridPane中包含了这两个，并将左侧的文本与BOTTOM_RIGHT对齐，并将右侧的文本BOTTOM_LEFT对齐，因此两者之间没有间隙：

如何使两个文本对齐，使其看起来像下图？

事后看来，TextFlow本来是个更好的解决方案，但是我现在的工作还远远不够，现在不能更改它。

Answer 1

这取决于您构建Scene的方式。如果您使用的是FXML / Scene Builder，则将valignment行的GridPane属性设置为BASELINE。

这是一个完整的FXML，可复制您的屏幕截图（无样式）：

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.*?>
<GridPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1">
    <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"/>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"/>
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="-Infinity" valignment="BASELINE" vgrow="SOMETIMES"/>
    </rowConstraints>
    <children>
        <Label style="-fx-font-size: 5.0em;" text="44"/>
        <Label style="-fx-font-size: 3.0em;" text="\%" GridPane.columnIndex="1"/>
    </children>
</GridPane>

如果您使用Java设计Scene，则最终目标是相同的：将行的valignment设置为BASELINE：

import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Region;
import javafx.scene.layout.RowConstraints;
import javafx.stage.Stage;

public class TextAlignSample extends Application {

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

    @Override
    public void start(Stage primaryStage) {

        // Simple Interface
        GridPane root = new GridPane();

        RowConstraints constraints = new RowConstraints(
                Region.USE_PREF_SIZE,
                Region.USE_COMPUTED_SIZE,
                Region.USE_COMPUTED_SIZE);
        constraints.setValignment(VPos.BASELINE);

        root.getRowConstraints().add(constraints);

        // Add our Labels
        root.add(new Label("44") {{
            setStyle("-fx-font-size: 5.0em");
        }}, 0, 0);
        root.add(new Label("%") {{
            setStyle("-fx-font-size: 3.0em");
        }}, 1, 0);

        // Show the stage
        primaryStage.setScene(new Scene(root));
        primaryStage.setTitle("TextAlignSample Sample");
        primaryStage.show();

    }
}

结果：

对不起，奇怪的颜色；我的屏幕截图软件出了什么问题

如何将具有不同文本大小的标签与Botttom对齐？

1 个答案: