Question

我正在尝试使用不同的颜色（比如灰色）设置选定的，未聚焦的ListView行的样式。我发现这个有用的CSS snippet非常有用，但它缺乏非常需要的行为，可以在焦点不同时对选择进行不同的着色。

/*
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 */
}

即，上述评论＃4如何实施？谢谢。

Answer 1

列表单元格既被选中又无法聚焦的方式是ListView它是失去焦点的一部分。考虑到这一点，应为每个条件创建两个css类，其中一个包括ListView的css选择器（列表视图）。

.list-cell:filled:selected {
    /* 4: (Styling when out of focus)*/
    -fx-background-color: linear-gradient(#333 0%, #777 25%, #aaa 75%, #eee 100%);
    -fx-text-fill: white;
}

.list-view:focused .list-cell:filled:selected {
    /* 3: (This is more specific and therefore overrides the above)*/
    -fx-background-color: linear-gradient(#300 0%, #700 25%, #a00 75%, #e00 100%);
}

JavaFX - 为未聚焦的ListView行设置样式

1 个答案: