如何让ScrollPane内的VBox实现响应式（聊天应用场景）

我希望聊天窗口可调整大小且支持滚动，目前除ChatLog（VBox）外其余功能正常。为实现滚动条，我将VBox置于AnchorPane的ScrollPane中，此时仅ScrollPane可通过锚点值实现响应式；若移除ScrollPane直接给VBox设置锚点，虽能响应式但会丢失滚动条。请问如何在保留ChatLog滚动条的同时，使其实现右侧锚定的响应式效果？

FXML代码 #

<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-background-color: #5b2529;" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.lmu.jungejunkervp.ClientWindowController">
<children>
    <ScrollPane fx:id="scrollPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="265.0" prefWidth="592.0" AnchorPane.bottomAnchor="57.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="5.0">
         <content>
          <VBox fx:id="chatLog" prefHeight="265.0" prefWidth="575.0" />
         </content></ScrollPane>
    <TextArea fx:id="messageBox" layoutX="5.0" layoutY="349.0" onKeyPressed="#onEnterSend" prefHeight="47.0" prefWidth="536.0" promptText="enter message..." AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="61.0" />
    <Button fx:id="sendButton" mnemonicParsing="false" onAction="#setSendButtonAction" onMouseClicked="#setSendButtonAction" prefHeight="47.0" prefWidth="52.0" text="Send" AnchorPane.bottomAnchor="5.0" AnchorPane.rightAnchor="5.0" />
</children>
</AnchorPane>

Java相关代码 #

添加聊天消息方法 #

public void addLabel(String message, Pos position) {
    HBox hBox = new HBox();
    hBox.setAlignment(position);
    hBox.setPadding(new Insets(5, 5, 5, 10));

    Text text = new Text(message);
    TextFlow textFlow = new TextFlow(text);

    textFlow.setStyle("-fx-background-color: rgb(233,233,235);" +
                        "-fx-background-radius: 20px");
    textFlow.setPadding(new Insets(5, 10, 5, 10));

    hBox.getChildren().add(textFlow);
    Platform.runLater(new Runnable() {
        @Override
        public void run() {
            chatLog.getChildren().add(hBox);
        }
    });
}

发送按钮事件方法 #

public void setSendButtonAction() {
    String message = messageBox.getText().replaceAll("[\n\r]", "");
    try {
        if (!message.isEmpty()) {
            // show message on the sending client window
            addLabel(message, Pos.CENTER_RIGHT);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}

解决方案 #

要同时保留滚动条和实现响应式，只需要两步调整：

1. 修改FXML中的ScrollPane与VBox属性 #

• 给ScrollPane添加fitToWidth="true"，让其内容自动匹配视口宽度
• 移除VBox的固定prefWidth值，设置maxWidth="1.7976931348623157E308"（允许无限拉伸宽度）

修改后的ScrollPane片段：

<ScrollPane fx:id="scrollPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="265.0" prefWidth="592.0" AnchorPane.bottomAnchor="57.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="5.0" fitToWidth="true">
     <content>
      <VBox fx:id="chatLog" prefHeight="265.0" maxWidth="1.7976931348623157E308" />
     </content>
</ScrollPane>

2. 修改Java代码中的消息容器布局 #

在addLabel方法里，给每个消息对应的HBox设置setMaxWidth(Double.MAX_VALUE)，让HBox占满VBox的宽度，确保左/右对齐的消息能跟随窗口宽度变化：

修改后的addLabel方法：

public void addLabel(String message, Pos position) {
    HBox hBox = new HBox();
    hBox.setAlignment(position);
    hBox.setPadding(new Insets(5, 5, 5, 10));
    hBox.setMaxWidth(Double.MAX_VALUE); // 让HBox占满VBox宽度

    Text text = new Text(message);
    TextFlow textFlow = new TextFlow(text);

    textFlow.setStyle("-fx-background-color: rgb(233,233,235);" +
                        "-fx-background-radius: 20px");
    textFlow.setPadding(new Insets(5, 10, 5, 10));

    hBox.getChildren().add(textFlow);
    Platform.runLater(() -> chatLog.getChildren().add(hBox));
}

调整完成后，窗口拉伸时ScrollPane会跟随锚点自适应大小，VBox自动匹配ScrollPane宽度，聊天消息的对齐也能正确响应窗口变化，同时滚动条功能完全保留。

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