聊天应用GUI开发：如何将TextArea输入内容添加至ScrollPane？

Hey there! Let's get that chat send functionality working for your JavaFX app. Since you're prioritizing features over polish right now, here's a straightforward implementation that handles both button clicks and Enter key presses, plus adds your concatenated messages to the ScrollPane:

Your ScrollPane needs a container to hold all the incoming messages—we'll use a VBox for simple vertical stacking. Here's a snippet to add to your FXML:

<ScrollPane fx:id="chatScrollPane" fitToWidth="true">
    <VBox fx:id="chatMessageContainer" spacing="8" padding="10" />
</ScrollPane>
<TextArea fx:id="textInput" promptText="Type your message here..." />
<Button fx:id="sendButton" text="Send" />

We'll add the missing VBox injection, create a reusable send method, and bind both the button and Enter key to trigger it:

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.input.KeyCode;

public class Controller {
    @FXML private TextArea textInput;
    @FXML private Button sendButton;
    @FXML private ScrollPane chatScrollPane;
    @FXML private VBox chatMessageContainer;

    // Replace this with your actual string to concatenate (e.g., username)
    private final String prefix = "You: ";

    @FXML
    public void initialize() {
        // Bind send button click to our send method
        sendButton.setOnAction(event -> sendMessage());
        
        // Bind Enter key (allow Shift+Enter for new lines in input)
        textInput.setOnKeyPressed(event -> {
            if (event.getCode() == KeyCode.ENTER && !event.isShiftDown()) {
                event.consume(); // Stop the TextArea from adding a new line
                sendMessage();
            }
        });

        // Auto-scroll to the latest message
        chatScrollPane.vvalueProperty().bind(chatMessageContainer.heightProperty());
    }

    private void sendMessage() {
        String input = textInput.getText().trim();
        if (!input.isEmpty()) {
            // Concatenate your input with the target string
            String fullMessage = prefix + input;
            // Add the message to the chat container
            chatMessageContainer.getChildren().add(new Text(fullMessage));
            // Clear the input field after sending
            textInput.clear();
        }
    }
}

• Message container choice: VBox is perfect for basic vertical chat flow. Later, if you want fancier message bubbles, you can swap it for HBox (to align sender/receiver messages) or custom components.
• Enter key behavior: Checking for !event.isShiftDown() lets users press Shift+Enter to add line breaks in their message—way better for user experience than blocking all Enters.
• Auto-scroll: Binding the ScrollPane's vertical value to the container's height ensures users always see the newest message without manual scrolling.
• Empty input guard: Trimming the input and checking for emptiness prevents sending blank messages.

Once you've got this working, you can easily tweak the appearance later with CSS—like styling message text, adding background bubbles, or adjusting spacing.

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