JavaFX - CSS 样式列表视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15641478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaFX - CSS styling listview
提问by Leonardo
I have a ListView and want the following:
我有一个 ListView 并想要以下内容：
- Odd rows with white background color;
- ListView: when mouse over an item, highlight with a blue shade;
- ListView: when an item is selected, paint it with a gradient;
- ListView: when focus is lost from ListView, selected item should be painted with gradient;
- ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
- 带有白色背景色的奇数行；
- ListView：当鼠标悬停在一个项目上时，用蓝色阴影突出显示；
- ListView：当一个项目被选中时，用渐变绘制它；
- ListView：当ListView失去焦点时，选择的item应该用渐变绘制；
- ListView：所有项目将以文本填充黑色开头。但是在鼠标悬停和/或选择时，它会变为白色。
That's my code. It's working fine, except for the even rows: on mouse over, it highlight in white. So, the text's white and can't be showed. What's wrong with it?
那是我的代码。它工作正常，除了偶数行：在鼠标悬停时，它以白色突出显示。所以，文本是白色的，无法显示。它出什么问题了？
.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;
}
Thanks in advance.
提前致谢。
回答by Rainer Schwarze
EDIT:
编辑：
Slightly changing your css:
稍微改变你的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;
}
This css produces the following presentation:
此 css 生成以下演示文稿：
Does this give what you expect?
这是否符合您的期望？
I changed oddto even. The first cell is even, because its index value is 0 (zero). Also -fx-cell-hover-coloris not valid. I changed it to -fx-background-colorwhere needed or removed it.
我换odd到even。第一个单元格是偶数，因为它的索引值为 0（零）。也是-fx-cell-hover-color无效的。我将其更改为-fx-background-color需要的地方或将其删除。
Original text: (note that this has different interpretation of odd/even)
原文：（注意这里对奇数/偶数有不同的解释）
My take would be this:
(I included your requirements in a numbered list for reference in the css. I also made the gradient more obvious and added a green background for even cells.)
我的看法是：（
我将您的要求包含在编号列表中以供 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 */
}
This leads to this rendering:
这导致了这种渲染：
