14

我有一个 ListView 并想要以下内容：

  • 白色背景颜色的奇数行；
  • ListView：当鼠标悬停在一个项目上时，用蓝色阴影突出显示；
  • ListView：当一个item被选中时，用渐变绘制它；
  • 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;
}

提前致谢。

4

1 回答 1

25

编辑：

稍微改变你的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 表示变体 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 渲染变体 2

于 2013-03-27T14:28:24.997 回答