JavaFX：动态缩放标签字体大小

Question

我正在开发一个 JavaFX 应用程序，并且 VBox 中有两个标签。这些标签显示计算器的结果和操作。我希望这些标签的字体大小随着窗口大小的调整或最大化而动态增加，但它们也应该遵循“最小”大小。

以下是定义 VBox 和标签的 FXML 代码的一部分：

<VBox maxHeight="Infinity" maxWidth="Infinity" spacing="15.0" xmlns="http://javafx.com/javafx/23" xmlns:fx="http://javafx.com/fxml/1" fx:controller="muri.calc.HelloController">
    <padding>
        <Insets bottom="32.0" left="34.0" right="32.0" top="12.0" />
    </padding>
    <VBox alignment="TOP_RIGHT" VBox.vgrow="ALWAYS">
        <Button fx:id="botaoTema" mnemonicParsing="false" onAction="#mudarTema" style="-fx-background-color: transparent;" VBox.vgrow="ALWAYS">
            <graphic>
                <ImageView fx:id="imagemTema" fitHeight="90.0" fitWidth="31.0" pickOnBounds="true" preserveRatio="true">
                    <Image url="@../../images/light-mode.png" />
                </ImageView>
            </graphic>
         <VBox.margin>
             <Insets />
         </VBox.margin>
        </Button>
    </VBox>
    <VBox alignment="BOTTOM_RIGHT" VBox.vgrow="ALWAYS">
        <Label fx:id="reviewTexto" styleClass="label-review" text="70 + 12 =" VBox.vgrow="ALWAYS" />
        <Label fx:id="resultadoTexto" styleClass="label-resultado" text="82" VBox.vgrow="ALWAYS">
         <VBox.margin>
            <Insets />
         </VBox.margin>
         <padding>
            <Insets bottom="-24.0" top="-24.0" />
         </padding></Label>
    </VBox>
</VBox>

此外，这些标签使用 CSS 代码设置样式：

.label-resultado {
    -fx-text-fill: #ffffff;
    -fx-font-size: 70;
    -fx-font-family: 'Hind Siliguri Medium';
}

.label-review {
    -fx-text-fill: #ffffff;
    -fx-font-size: 24;
    -fx-font-family: 'Hind Siliguri Medium';
}

首先，我尝试将

vgrow

属性设置为“始终”，因为这解决了我之前遇到的类似问题，但这次不起作用。

然后，我尝试向 VBox 和舞台添加监听器，但字体没有按预期调整大小。

public class HelloController {

    private static final double FONT_MIN_SIZE_RESULTADO = 70;
    private static final double FONT_MIN_SIZE_REVIEW = 24;
 
    public void inicializarStage(Stage stage) {
        stage.widthProperty().addListener((obs, oldWidth, newWidth) -> ajustarFonte(stage));
        stage.heightProperty().addListener((obs, oldHeight, newHeight) -> ajustarFonte(stage));
        System.out.println(stage.getWidth()+" "+stage.getHeight());
    }

    private void adjustFontStage stage) {
        double width= stage.getWidth();
        double height= stage.getHeight();

        double scaleWidth = width/ 360.6;
        double scaleHeight = height / 677.0;

        double newResultFont = Math.max(FONT_MIN_SIZE_RESULTADO, FONT_MIN_SIZE_RESULTADO * Math.min(scaleWidht, scaleHeight));
        double newReviewFont = Math.max(FONT_MIN_SIZE_REVIEW, FONT_MIN_SIZE_REVIEW * Math.min(scaleWidht, scaleHeight));

        resultadoTexto.setStyle("-fx-font-size: " + newResultFont + "px;");
        reviewTexto.setStyle("-fx-font-size: " + newReviewFont + "px;");
    }

我认为，也许程序无法覆盖 css 上定义的值，因此我从那里删除了

fx-font-size

属性，并尝试在

initialize

方法中动态设置它，但是，这也不起作用。

public class HelloController {

    private static final double FONT_MIN_SIZE_RESULTADO = 70;
    private static final double FONT_MIN_SIZE_REVIEW = 24;

    private void initialize() {
        resultadoTexto.setStyle("-fx-font-size: " + FONT_MIN_SIZE_RESULTADO + "px;");
        reviewTexto.setStyle("-fx-font-size: " + FONT_MIN_SIZE_REVIEW + "px;");
    }
 
    public void initializeStage(Stage stage) {
        stage.widthProperty().addListener((obs, oldWidth, newWidth) -> ajustarFonte(stage));
        stage.heightProperty().addListener((obs, oldHeight, newHeight) -> ajustarFonte(stage));
        System.out.println(stage.getWidth()+" "+stage.getHeight());
    }

    private void ajustarFonte(Stage stage) {
        double width= stage.getWidth();
        double height= stage.getHeight();
 
        double scaleWidth = width/ 360.6;
        double scaleHeight = height / 677.0;

        double newResultFont = Math.max(FONT_MIN_SIZE_RESULTADO, FONT_MIN_SIZE_RESULTADO * Math.min(scaleWidht, scaleHeight));
        double newReviewFont = Math.max(FONT_MIN_SIZE_REVIEW, FONT_MIN_SIZE_REVIEW * Math.min(scaleWidht, scaleHeight));

        resultadoTexto.setStyle("-fx-font-size: " + newResultFont + "px;");
        reviewTexto.setStyle("-fx-font-size: " + newReviewFont + "px;");
    }

我希望两个标签的字体大小随窗口大小动态缩放，同时遵守每个标签的最小大小（

resultadoTexto

为 70 像素，

reviewTexto

为 24 像素）。理想情况下，包含标签的

VBox

应正确调整当窗口大小或最大化时，字体大小应在窗口缩小时增大和缩小（但不低于最小尺寸）。

正常尺寸

调整大小（看看标签如何没有按应有的方式覆盖整个空间）

Answer 1

首先，我认为您的问题找错了地方。你说字体没有更新。但它们确实是根据您提供的屏幕截图进行更新的

我认为您的问题主要与您设计的布局有关。我可以看到您包含了许多不必要的设置。

任何布局的黄金法则是：

如果没有任何特定属性，请勿包含/定义属性 关于他们的要求。

我可以看到（在 fxml 中）您包含了严格的

vgrow

设置并包含 -ve 填充。如果您更正该错误，则标签上方的空格将被删除。

我无法给出确切的答案，因为您没有提供可重现的演示。但您可以从以下 FXML 更改开始，仅逐步包含您的要求所需的内容。

<VBox maxHeight="Infinity" maxWidth="Infinity" spacing="15.0" xmlns="http://javafx.com/javafx/23" xmlns:fx="http://javafx.com/fxml/1" fx:controller="muri.calc.HelloController">
    <padding>
        <Insets bottom="32.0" left="34.0" right="32.0" top="12.0" />
    </padding>
    <StackPane alignment="CENTER_RIGHT">
        <Button fx:id="botaoTema" mnemonicParsing="false" onAction="#mudarTema" style="-fx-background-color: transparent;">
            <graphic>
                <ImageView fx:id="imagemTema" fitHeight="90.0" fitWidth="31.0" pickOnBounds="true" preserveRatio="true">
                    <Image url="@../../images/light-mode.png" />
                </ImageView>
            </graphic>
        </Button>
    </StackPane>
    <VBox alignment="CENTER_RIGHT">
        <Label fx:id="reviewTexto" styleClass="label-review" text="70 + 12 ="/>
        <Label fx:id="resultadoTexto" styleClass="label-resultado" text="82" />
    </VBox>
</VBox>