JavaFX VBox中如何让WebView实现与Label一致的自适应布局行为

问题描述 #

我开发了一款支持用户记笔记的程序，记笔记时使用支持表格、列表等格式的JavaFX HTMLEditor组件，后续需要向用户展示这些笔记内容，目前JavaFX中展示HTML的唯一可用方式是通过WebView加载WebEngine实现。
但WebView在容器中的布局行为和Label存在差异，我需要让WebView的表现和Label完全一致。

复现场景 #

• 仅放置1个Label组件的VBox效果：
  
  红色背景的Label在VBox容器内仅占用必要的垂直空间，且文本自动换行，完全符合预期效果。
• VBox中添加WebView后再添加第二个Label的效果：
  
  中间白色背景的WebView会尽可能垂直拉伸，上下两个Label也不再自动换行。如果实际项目中堆叠两个WebView，二者会各占50%可用垂直空间，而非仅占用内容所需高度，不符合需求。
• 缩小窗口宽度时的效果：
  
  WebView还会出现垂直滚动条，我希望它能和Label一样，始终仅占用内容所需高度，无多余空间、无滚动。我已经尝试将WebView的vgrow属性设置为null或Priority.NEVER，均无效果。

复现代码 #

Main.java

package main;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;

public class Main extends Application {
    
    @Override
    public void start(Stage _primaryStage) {

        // create the view
        VBox vBox = new VBox();
        vBox.setPrefHeight(600);
        vBox.setPrefWidth(600);
        
        String textString = "";
        textString += "It's the end of the world as we know it and I feel fine. ";
        textString += textString;
        textString += textString;
        textString += textString;
        textString += textString;
        
        Label testLabel = new Label(textString);
        testLabel.getStyleClass().add("label");
        testLabel.setWrapText(true);
        vBox.getChildren().add(testLabel);
        
        WebView testWebView = new WebView();
        testWebView.getStyleClass().add("webview");
        testWebView.getEngine().loadContent(textString);
        vBox.getChildren().add(testWebView);
        
        VBox.setVgrow(testWebView, Priority.NEVER);
        
        Label testLabel2 = new Label(textString);
        testLabel2.getStyleClass().add("label");
        testLabel2.setWrapText(true);
        vBox.getChildren().add(testLabel2);
        
        Scene scene = new Scene(vBox);
        scene.getStylesheets().add("/main/styles.css");
        
        _primaryStage.setTitle("Notes Program");
        _primaryStage.setScene(scene);
        _primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
    
}

styles.css

.label {
    -fx-background-color: 'red';
}

.webview {

}

通过监听WebView内容加载状态、宽度变化，动态计算内容实际高度并手动设置WebView高度，同时禁用滚动条即可实现和Label一致的布局效果，具体修改如下：

1. 新增高度更新工具方法，通过JS获取HTML内容实际高度，同步设置WebView的高度属性

private void updateWebViewHeight(WebView webView) {
    WebEngine engine = webView.getEngine();
    // 执行JS获取页面内容的实际总高度
    Object heightObj = engine.executeScript("document.body.scrollHeight");
    if (heightObj instanceof Number) {
        double height = ((Number) heightObj).doubleValue();
        webView.setPrefHeight(height);
        webView.setMaxHeight(height);
    }
}

2. 在WebView初始化时添加监听，内容加载完成、宽度变化时自动更新高度

// 原有WebView初始化代码保留，添加以下逻辑
testWebView.setPrefHeight(0); // 初始设置为0，避免加载前占用多余空间
testWebView.widthProperty().addListener((obs, oldVal, newVal) -> {
    if (newVal.doubleValue() > 0) {
        updateWebViewHeight(testWebView);
    }
});
testWebView.getEngine().documentProperty().addListener((obs, oldDoc, newDoc) -> {
    updateWebViewHeight(testWebView);
});

3. 修改HTML加载逻辑和CSS，禁用滚动条避免高度计算偏差

// 将原有loadContent替换为以下代码，给HTML添加全局禁用滚动的样式
String htmlContent = "<html><head><style>body{margin:0;padding:0;overflow:hidden;}</style></head><body>" 
+ textString + "</body></html>";
testWebView.getEngine().loadContent(htmlContent);

.label {
    -fx-background-color: 'red';
}
.webview {
    -fx-overflow: hidden;
}

修改完成后WebView就会仅占用内容所需的垂直高度，宽度变化时也会自动调整高度适配内容换行，和Label的布局行为完全一致。

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