JavaFX - список стилей CSS

У меня есть ListView и хочу:

  • Нечетные строки с белым фоном;
  • ListView: при наведении указателя мыши на элемент выделяется синим оттенком;
  • ListView: когда выбран элемент, нарисуйте его градиентом;
  • ListView: когда фокус потерян из ListView, выбранный элемент должен быть окрашен градиентом;
  • ListView: все элементы начинаются с черного текста. Но при наведении мыши и/или выборе он изменится на белый.

Это мой код. Он отлично работает, за исключением четных строк: над мышью он выделяется белым цветом. Итак, текст белый и не может быть показан. Что с этим не так?

.list-cell:filled:selected:focused, .list-cell:filled:selected {
    -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
    -fx-text-fill: white;
}

.list-cell:odd {
    -fx-cell-hover-color: #0093ff;
    -fx-background-color: white;
}

.list-cell:filled:hover {
    -fx-cell-hover-color: #0093ff;
    -fx-text-fill: white;
}

Заранее спасибо.

Ответы

Ответ 1

РЕДАКТИРОВАТЬ:

Немного изменив ваш css:

.list-cell:filled:selected:focused, .list-cell:filled:selected {
    -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
    -fx-text-fill: white;
}

.list-cell:even { /* <=== changed to even */
    -fx-background-color: white;
}

.list-cell:filled:hover {
    -fx-background-color: #0093ff;
    -fx-text-fill: white;
}

Этот css создает следующую презентацию:

ListView presentation variant 1

Означает ли это, что вы ожидаете?

Я изменил odd к even. Первая ячейка четная, потому что ее значение индекса равно 0 (ноль). Также -fx-cell-hover-color недействителен. Я изменил его на -fx-background-color где это необходимо или удалил.

Исходный текст: (обратите внимание, что это имеет другую интерпретацию нечетного/четного)

Мой прием будет таким:
(Я включил ваши требования в нумерованный список для справки в css. Я также сделал градиент более очевидным и добавил зеленый фон для четных ячеек.)

/*
1. Odd rows with white background color;
2. ListView: when mouse over an item, highlight with a blue shade;
3. ListView: when an item is selected, paint it with a gradient;
4. ListView: when focus is lost from ListView, selected item should be painted with gradient;
5. ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
*/

.list-cell:filled:selected:focused, .list-cell:filled:selected {
    /* 3:, 4: */
    -fx-background-color: linear-gradient(#333 0%, #777 25%, #aaa 75%, #eee 100%);
    -fx-text-fill: white; /* 5 */
}
.list-cell { -fx-text-fill: black; /* 5 */ }
.list-cell:odd { -fx-background-color: white; /* 1 */ }
.list-cell:even { -fx-background-color: #8f8; /* for information */ }
.list-cell:filled:hover { 
    -fx-background-color: #00f; /* 2 */
    -fx-text-fill: white; /* 5 */
}

Это приводит к этому рендерингу:

ListView rendering variant 2