调用相同代码渲染JavaFX节点时Button、Text等控件尺寸异常变大问题求解

问题描述 #

无论是Button还是Text控件，调用完全相同的代码块重新渲染时，尺寸都会发生变化。在实现用户自定义配色功能时，配置完成后重新调用节点添加逻辑加载新配色的节点，就会出现该问题：部分场景下节点宽度增大，部分场景下高度增大，单次变化幅度虽小，但多个节点叠加后会导致UI布局错乱。

效果对比图：

复现代码 #

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Cursor;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class TestingSize extends Application {
    static Stage stage;
    static Pane pane;
    static Scene scene;

    @Override
    public void start(Stage primaryStage) throws Exception {
        pane = new AnchorPane();
        scene = new Scene(pane);
        stage = primaryStage;
        stage.setScene(scene);

        show();
    }

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

    static void show() {
        pane.getChildren().clear();
        Background backgroundEnter = new Background(new BackgroundFill(Color.GREEN, null, null));
        Background backgroundExit = new Background(new BackgroundFill(Color.RED, null, null));
        Font font = new Font("Arial", 16);
        Text text = new Text("Test");
        text.setFont(font);
        Insets insets = new Insets(Math.ceil(text.getLayoutBounds().getHeight() * 0.3),
                Math.ceil(text.getLayoutBounds().getHeight() * 0.6),
                Math.ceil(text.getLayoutBounds().getHeight() * 0.3),
                Math.ceil(text.getLayoutBounds().getHeight() * 0.6));

        Button button = new Button("Test");
        button.setLayoutX(20);
        button.setLayoutY(20);
        button.setPadding(insets);
        button.setFont(font);
        button.setTextFill(Color.BLUE);
        button.setBackground(backgroundExit);
        button.setOnMouseEntered(event -> {
            button.setTextFill(Color.YELLOW);
            button.setBackground(backgroundEnter);
            scene.setCursor(Cursor.HAND);
        });
        button.setOnMouseExited(event -> {
            button.setTextFill(Color.BLUE);
            button.setBackground(backgroundExit);
            scene.setCursor(Cursor.DEFAULT);
        });
        pane.getChildren().add(button);

        pane.setOnMouseClicked(event -> {
            show();
        });

        stage.setWidth(150);
        stage.setHeight(150);
        if (!stage.isShowing()) {
            stage.centerOnScreen();
            stage.show();
        }
    }
}

问题诱因 #

1. 布局属性计算时机错误：未挂载到场景图（Scene）的节点，调用getLayoutBounds()、getWidth()、getHeight()这类布局相关方法时，返回的是未经过渲染引擎计算的估算值，存在浮点偏差。代码中直接用新建的未挂载的Text节点的layoutBounds计算按钮padding，每次计算的结果都存在微小误差，叠加Math.ceil()的向上取整逻辑，就会每次重新渲染时padding都变大一点，最终导致节点尺寸不断增加。
2. 默认控件样式干扰：Button等内置控件默认自带系统样式规则，包含默认的边框、内边距、外边距属性，动态重建节点时，自定义属性和默认样式的应用顺序存在差异，也会导致尺寸计算出现偏差。
3. 不必要的节点全量重建：当前配色切换的实现逻辑是直接清空所有节点再重新创建，这种全量重建的方式本身就会触发多次不必要的布局计算，放大了上述的误差问题。

解决方案 #

• 修正布局属性计算逻辑：不要依赖未挂载节点的布局属性计算尺寸，如果需要获取指定字体的文字高度，直接使用字体度量工具计算，结果固定无偏差：

// 引入相关包：import javafx.scene.text.FontMetrics;
// 引入相关包：import javafx.stage.Screen;
Font font = new Font("Arial", 16);
FontMetrics metrics = Screen.getPrimary().getFontMetrics(font);
double textHeight = metrics.getLineHeight();
// 后续用该textHeight计算padding即可

• 消除默认样式干扰：完全自定义控件外观时，可以清除控件的默认样式类，避免默认属性和自定义属性冲突：

button.getStyleClass().clear();

• 优化配色更新逻辑：不需要删除重建所有节点，直接修改现有节点的textFill、background等属性即可，既不会触发不必要的布局重新计算，性能也更优。
• 固定尺寸要求严格的控件：对布局精度要求高的控件，可以直接固定首选尺寸，避免布局引擎动态调整：

button.setPrefSize(100, 40);
button.setMaxSize(100, 40);
button.setMinSize(100, 40);

内容的提问来源于stack exchange，提问作者Devorious