logo标签列表

JavaFX - CSS样式化列表视图

csslistviewjavafx
16

我有一个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个回答
27

编辑：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接