web-dev-qa-db-ja.com

JavaFX-CSSスタイリングリストビュー

私はリストビューを持っていて、次のことを望んでいます：

  • 白い背景色の奇数行。
  • 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;
}

前もって感謝します。

csslistviewjavafx
14
Leonardo

編集：

あなたの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 rendering variant 2

23
Rainer Schwarze