JavaFX的 - CSS样式列表视图 [英] JavaFX - CSS styling listview

问题描述

我有一个ListView和希望以下内容：

I have a ListView and want the following:

• 奇数行与白色背景色;


• 的ListView：当鼠标移到某个项目，突出了蓝色的灯罩;


• 的ListView：当一个项目被选中，用渐变画它;


• 的ListView：当焦点从ListView中丢失，所选的项目应与梯度涂;


• 的ListView：所有项目将开始与文字填充黑色。但在鼠标和/或选择将改为白色。

这是我的code。它的正常工作，除了偶数行：在鼠标悬停时，它的白色突出。所以，文本是白色的，不能显示。这有什么错呢？

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

先谢谢了。

推荐答案

编辑：

稍微改变你的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产生以下presentation：

This css produces the following presentation:

这是否让你想到了什么？

Does this give what you expect?

我改变了奇到甚至。第一单元是偶数，因为它的索引值为0（零）。此外 -fx细胞悬停颜色是无效的。我改成了在需要的地方或删除其-fx背景色。

I changed odd to even. The first cell is even, because its index value is 0 (zero). Also -fx-cell-hover-color is not valid. I changed it to -fx-background-color where needed or removed it.

原文：（注意，这有不同的间pretation奇/偶）

Original text: (note that this has different interpretation of odd/even)

我采取的是这样的：

（我包含在一个编号列表您的要求在CSS参考，我也做了梯度比较明显，增加了甚至细胞绿色背景。）

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.)

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

这导致了这种渲染：

这篇关于JavaFX的 - CSS样式列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！