JavaFX – CSS样式列表

发布时间：2020-12-14 05:12:06 所属栏目：Java 来源：网络整理

导读：我有一个ListView,并希望以下内容：白色背景颜色的奇数行 ListView：当鼠标悬停在一个项目上时,以蓝色突出显示; ListView：当选择项目时,用渐变绘制; ListView：当ListView丢失焦点时,所选项目应该用渐变绘制; ListView：所有项目将以文本填充黑色开始.但是

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

>白色背景颜色的奇数行
> ListView：当鼠标悬停在一个项目上时,以蓝色突出显示;
> 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;
}

提前致谢.

解决方法

编辑：

稍微改变你的css：

.list-cell:filled:selected:focused,#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产生以下演示文稿：

这是否给你期望的？

我变得奇怪甚至.第一个单元格是均匀的,因为它的索引值为0(零).此外,-fx-cell-hover-color无效.我将其更改为-fx-background-color,需要或删除它.

原文：(注意,这对奇数/偶数有不同的解释)

我的采取是这样的：
(我将您的要求包含在编号列表中,以供参考,我也使梯度更明显,并为均匀单元格添加了绿色背景.)

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

这导致了这种渲染：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!