如何仅更改 javafx TextField 中最后一个字符的颜色

Posted 2023-02-23

【中文标题】如何仅更改 javafx TextField 中最后一个字符的颜色

【英文标题】：How to only change color of the last character in a javafx TextField

【发布时间】：2022-01-16 12:04:23

【问题描述】：

我正在尝试制作一个打字游戏，我为用户输入创建了一个文本字段，并尝试制作游戏，以便文本字段的最后一个字符如果与单词中的相应字符不匹配，则为红色被输入。以下是我目前拥有的相关节点类型。

Label wordsToType = new Label();
TextField userInput = new TextField();
StringBuilder wordsTyped = new StringBuilder();
TextField lastChar = new TextField();

userInput.setOnKeyReleased(e -> 
    wordsTyped.append(userInput.getText()); // words typed is a string builder of what is in userInput

    if (wordsTyped.toString().charAt(wordsTyped.length() - 1) - wordsToType.getText().charAt(wordsTyped.length() - 1) != 0) 
        lastChar.setText(e.getText());
        lastChar.setStyle("-fx-text-fill: red; -fx-font-size: 16px;");
        wordsTyped.setLength(wordsTyped.length() - 1); // deletes last char from wordsTyped
        userInput.setText(wordsTyped.toString() + lastChar.getText());
        userInput.end();
    
    wordsTyped.delete(0, wordsTyped.length());
);

【问题讨论】：

TextField 和TextArea 对于所有文本只能有一种样式，至少在它们的默认皮肤是如何实现的情况下。要拥有具有多种样式的文本，您可能需要使用 TextFlow 加上多个 Text 节点来研究。还有一个名为 RichTextFX 的库，它可以提供你想要的。

也就是说，一个文本域中选中的文本与域中其他文本的样式不同，两者的样式都可以通过css独立配置。也许您可以选择该字段中的最后一个字符。它可能对您有帮助，也可能没有。

@Slaw 我为RichTextFX添加了示例代码

【参考方案1】：

如 cmets 中所述，您可以使用 RichTextFX 突出显示不同样式的输入文本。这是一个示例代码：

Java：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import org.fxmisc.richtext.StyleClassedTextField;
import org.fxmisc.richtext.StyledTextField;
import org.fxmisc.richtext.model.StyleSpans;
import org.fxmisc.richtext.model.StyleSpansBuilder;

import java.util.Collection;
import java.util.Collections;

public class HighlightedTextFieldExample extends Application 

    @Override
    public void start(Stage stage) 
        StyledTextField<Collection<String>, Collection<String>> textField = new StyleClassedTextField();
        textField.lengthProperty().addListener((observableValue, oldValue, newValue) -> 
            if (newValue > 0) 
                StyleSpans<Collection<String>> styleSpans = new StyleSpansBuilder<Collection<String>>()
                        .add(Collections.emptyList(), newValue - 1) // no style (leading characters)
                        .add(Collections.singleton("last-character"), 1) // add a style class for the last character
                        .create();
                textField.setStyleSpans(0, styleSpans);
            
        );
        textField.setPrefWidth(400);

        Scene scene = new Scene(textField);
        scene.getStylesheets().add(HighlightedTextFieldExample.class.getResource("highlighting.css").toExternalForm());
        stage.setScene(scene);
        stage.setTitle("Last Character Highlighting Example");
        stage.show();
    

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

CSS 样式文件 (highlighter.css)：

.last-character 
    -fx-fill: red;

输出：