如何在 JavaFX 的 TextArea 中将内嵌图像添加到字符串的末尾? [英] How to add an inline image to the end of a string in a TextArea in JavaFX?

问题描述

当我的客户键入 :)

我正在尝试将其添加到 FXML 控制器中.当用户键入 :) 时，我使用以下 代码片段 :

I am trying to add this in the FXML controller. I have captured when the user types :) using the following code snippet :

if(chat.contains(":)")) {
    ...
} 

我的聊天记录被打印到一个名为 taChat

My chat is printed into a textarea named taChat

taChat.appendText(chat + '
');

感谢任何帮助！

推荐答案

更好的方法是使用 TextFlow 而不是使用 TextArea.

A better approach would be to use TextFlow instead of using TextArea.

优点:

• 单独的 Text 被视为 TextFlow 的子项.它们可以单独添加和访问.
• ImageView 可以作为子项直接添加到 TextFlow 中.

• Individual Text are treated as children to the TextFlow. They can be added and accessed individually.
• ImageView can be added directly to the TextFlow as a child.

支持笑脸的简单聊天窗口:)

A simple chat window with support for smiley :)

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.image.ImageView;
import javafx.scene.input.KeyCode;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

public class ChatWindowWithSmiley extends Application {

    public void start(Stage primaryStage) {

        TextFlow textFlow = new TextFlow();
        textFlow.setPadding(new Insets(10));
        textFlow.setLineSpacing(10);
        TextField textField = new TextField();
        Button button = new Button("Send");
        button.setPrefWidth(70);

        VBox container = new VBox();
        container.getChildren().addAll(textFlow, new HBox(textField, button));
        VBox.setVgrow(textFlow, Priority.ALWAYS);

        // Textfield re-sizes according to VBox
        textField.prefWidthProperty().bind(container.widthProperty().subtract(button.prefWidthProperty()));

        // On Enter press
        textField.setOnKeyPressed(e -> {
            if(e.getCode() == KeyCode.ENTER) {
                button.fire();
            }
        });

        button.setOnAction(e -> {
            Text text;
            if(textFlow.getChildren().size()==0){
                text = new Text(textField.getText());
            } else {
                // Add new line if not the first child
                text = new Text("
" + textField.getText());
            }
            if(textField.getText().contains(":)")) {
                ImageView imageView = new ImageView("http://files.softicons.com/download/web-icons/network-and-security-icons-by-artistsvalley/png/16x16/Regular/Friend%20Smiley.png");
                // Remove :) from text
                text.setText(text.getText().replace(":)"," "));
                textFlow.getChildren().addAll(text, imageView);
            } else {
                textFlow.getChildren().add(text);
            }
            textField.clear();
            textField.requestFocus();
        });

        Scene scene = new Scene(container, 300, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

输出

对于 unicode Emoji 支持，请访问 如何支持表情符号

For unicode Emoji support, please visit How to support Emojis

这篇关于如何在 JavaFX 的 TextArea 中将内嵌图像添加到字符串的末尾?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！