悬停效果对所选文本

Question

我有一个问题,我无法解决悬停效果对文本.

Text t1 = new Text();

Text t2 = new Text();

Text t3 = new Text();

Text t4 = new Text();

当我选择一个文本时,我想将背景更改为灰色.但是我不知道如何解决的棘手部分是如何从之前选择的文本中删除背景颜色？它应该像Toggle按钮一样工作,但是使用Text.

Answer 1

甲Text对象是Shape,它定义了一组用于造型比控制属性的有限得多; 例如,它没有背景.如果你想在UI中设置文本样式,你可能更喜欢Label结束Text.另一种选择是将Text某种形式Region(例如a StackPane)包裹起来并将背景应用于该区域.这会使你的代码变得复杂一点.

以下是一些解决方案:第一个不使用CSS并使用Labels,只需根据需要设置其样式.第二种方法使用不同的方法,您可以使用已经定义的"选择行为" 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 ;
}

使用这些解决方案中的任何一种,您都可以根据需要编辑样式.