JavaFX - CSS样式列表视图 [英] JavaFX - CSS styling 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，.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产生以下演示：

我改变了 odd 到甚至。第一个单元是偶数，因为它的索引值为0（零）。此外 -fx-cell-hover-color 无效。我将其更改为 -fx-background-color （如果需要或删除它）。

---

b $ b

原文：（注意这对奇数/偶数有不同的解释）

我的采取将是这样：0047
（我在一个编号列表中包括了你的要求，以便在css中引用，我也使渐变更加明显，并为偶数单元格添加了一个绿色背景。）

  / * 
 1.白色背景色的奇数行; 
 2. ListView：当鼠标悬停在一个项目上时，以蓝色阴影突出显示; 
 3. ListView：当选择一个项目时，使用渐变绘制它; 
 4. ListView：当从ListView中失去焦点时，所选项应该用渐变绘制; 
 5. ListView：所有项目将以文本填充黑色开始。但是在鼠标悬停和/或选择后，它将变为白色。 
 * / 
 
 .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; / *信息* /} 
 .list-cell：filled：hover {
 -fx-background-color：＃00f; / * 2 * / 
 -fx-text-fill：white; / * 5 * / 
} 
  

b
$ b

I have a ListView and want the following:

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

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.

解决方案

EDIT:

Slightly changing your 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:

Does this give what you expect?

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.

---

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

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

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