Эффект наведения на выделенный текст

Question

У меня есть проблема, которую я не могу решить с эффектом зависания текста.

Text t1 = new Text(); 

Text t2 = new Text(); 

Text t3 = new Text(); 

Text t4 = new Text(); 

Когда я выбираю один текст, я хотел бы изменить фон, например, на серый. Но сложная часть, которую я не знаю, как решить, как я могу удалить цвет фона из предыдущего выделенного текста? Он должен работать как кнопка Toggle, но с текстом.

Answer 1

Сначала создайте класс css.

.text:hover { 
    -fx-fill: blue; 
} 

.text:pressed { 
    -fx-fill: blue; 
} 

.text-selected { 
    -fx-fill: blue; 
} 

Затем создайте глобальную переменную.

Text selectText; 

Затем добавьте это:

scene.getStylesheets().add(Teste.class.getResource("text.css").toExternalForm(); 

t1.getStyleClass().add("text"); 
t2.getStyleClass().add("text"); 

t1.setOnMouseClicked(new EventHandler<MouseEvent>() { 
    @Override 
    public void handle(MouseEvent arg0) { 
     if (selectText != null) { 
      selectText.getStyleClass().remove("text-selected"); 
     } 
     t1.getStyleClass().add("text-selected"); 
     selectText = t1; 
    } 
}); 

t2.setOnMouseClicked(new EventHandler<MouseEvent>() { 
    @Override 
    public void handle(MouseEvent arg0) { 
     if (selectText != null) { 
      selectText.getStyleClass().remove("text-selected"); 
     } 
     t2.getStyleClass().add("text-selected"); 
     selectText = t2; 
    } 
}); 

Answer 2

Text объект является Shape, который определяет гораздо более ограниченный набор свойств для укладки, чем контроль; например, он не имеет фона. Если вы хотите стилизовать текст в пользовательском интерфейсе, вы, вероятно, предпочтете Label за Text. Другой вариант - обернуть Text в некотором виде Region (например, StackPane) и применить фон к региону. Это немного усложнит ваш код.

Вот несколько решений: первый использует CSS и использует Label s, просто устанавливая их стиль по мере необходимости. Второй использует другой подход, в котором вы можете использовать «поведение выбора», уже определенное в 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: Java с CSS pseudoclasses:

Используйте свойство для выделенного текста, как в первом решении, но манипулировать классы стиля, а не стиль непосредственно:

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 ; 
} 

С помощью любого из этих решений вы можете отредактировать стили, которые вам нужны.