14

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

前もって感謝します。

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 に答える