javafx - 选定文本上的悬停效果

Question

我有一个无法通过文本悬停效果解决的问题。

Text t1 = new Text();

Text t2 = new Text();

Text t3 = new Text();

Text t4 = new Text();

当我选择一个文本时，我想将背景更改为灰色。但我不知道如何解决的棘手部分是如何从先前选定的文本中删除背景颜色？它应该像切换按钮一样工作，但带有文本。

Answer 1

Text 对象是一个Shape，它定义了一组比控件更加有限的样式属性；例如它没有背景。如果您想在 UI 中设置文本样式，您可能应该更喜欢使用 Label 而不是 Text。另一种选择是将 Text 包装在某种 Region 中(例如 StackPane)，并将背景应用于该区域。但这会让你的代码变得有点复杂。

这里有一些解决方案:第一个不使用 CSS，而是使用 Label，只需根据需要设置其样式。第二种使用不同的方法，您可以使用 ToggleButton 中已定义的“选择行为”，但使切换按钮看起来像纯文本。这可能是最好的解决方案，因为它使用现有功能并仅使用 CSS 更改外观。第三种是第一种的改进，您可以将样式分解到 CSS 中，但自己实现选择。

解决方案 1:全部 Java:

创建一个属性来存储所选文本:

ObjectProperty<Label> selectedText = new SimpleObjectProperty<>();

注册一个具有属性的监听器，以重置先前选定文本的样式并设置新选定文本的样式:

selectedText.addListener((obs, oldSelectedText, newSelectedText) -> {
    if (oldSelectedText != null) {
        oldSelectedText.setStyle("");
    }
    if (newSelectedText != null) {
        newSelectedText.setStyle("-fx-background-color: lightgray;");
    }
});

为每个文本注册鼠标监听器，使它们在单击时成为选定的文本:

Label t1 = new Label("One");

Label t2 = new Label("Two");

Label t3 = new Label("Three");

Label t4 = new Label("Four");

Stream.of(t1, t2, t3, t4).forEach(t -> 
    t.setOnMouseClicked(event -> selectedText.set(t)));

解决方案 2:使用样式看起来像纯文本的切换按钮:

这实际上是我的首选解决方案:使用已为 ToggleButton 定义的选择行为，并仅使用 CSS 更改切换按钮的外观。

ToggleButton t1 = new ToggleButton("One");
ToggleButton t2 = new ToggleButton("Two");
ToggleButton t3 = new ToggleButton("Three");
ToggleButton t4 = new ToggleButton("Four");

ToggleGroup tg = new ToggleGroup();
Stream.of(t1, t2, t3, t4).forEach(t -> t.setToggleGroup(tg));

使用以下外部样式表:

.toggle-button, .toggle-button:selected , .toggle-button:hover,
.toggle-button:armed, .toggle-button:focused, .toggle-button:selected:focused {

    -fx-color: -fx-base ;
    -fx-background-color: transparent ;
    -fx-background-insets: 0 ;
    -fx-background-radius: 0 ;
    -fx-padding: 0 ;
    -fx-text-fill: -fx-text-background-color ;
}

.toggle-button:selected, .toggle-button:selected:focused {
    -fx-background-color: lightgray ;
}

解决方案 3:使用 css 伪类的 Java:

像第一个解决方案一样使用所选文本的属性，但直接操作样式类而不是样式:

ObjectProperty<Label> selectedText = new SimpleObjectProperty<>();
PseudoClass selected = PseudoClass.getPseudoClass("selected");

selectedText.addListener((obs, oldSelectedText, newSelectedText) -> {
    if (oldSelectedText != null) {
        oldSelectedText.pseudoClassStateChanged(selected, false);
    }
    if (newSelectedText != null) {
        newSelectedText.pseudoClassStateChanged(selected, true);
    }
});

创建文本对象，为其设置样式类，然后像以前一样注册鼠标监听器:

Label t1 = new Label("One");

Label t2 = new Label("Two");

Label t3 = new Label("Three");

Label t4 = new Label("Four");

Stream.of(t1, t2, t3, t4).forEach(t -> 
    t.setOnMouseClicked(event -> selectedText.set(t)));

然后使用外部样式表，并将您需要的任何样式应用于所选文本:

.label:selected {
    -fx-background-color: lightgray ;
}

使用任何这些解决方案，您都可以根据需要编辑样式。