2

リストビューで選択バーのテキストの色を変更する方法はありますか？できればCSSを使用してください。TableViewでは、次を使用できます。

-fx-selection-bar-text: white;

ただし、これはListViewでは機能しません。

更新：上記のケースは、CellFactoriesを使用してセルをレンダリングするときに発生します。

lvRooms.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
        @Override public ListCell<String> call(ListView<String> list) {
            return new RoomCell();
        }
    });

Cell Factoryクラスでは、行が選択されたときに喜んでケースをカバーします。

ただし、選択バーが移動されるたびではなく、最初に1回だけ呼び出されるため、isSelected（）メソッドは常にfalseになります。

更新2：これはRoomCellの実装です：

class RoomCell extends ListCell<String> {
        @Override
        public void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);

            if (item != null) {
                Log.debug("RoomCell called, item: "+item);
                final Label lbl = new Label(item); // The room name will be displayed here
                lbl.setFont(Font.font("Segoe UI", FontWeight.BOLD, 18));
                lbl.setStyle("-fx-text-fill: black");

                //lbl.setTextFill(isSelected()?Color.WHITE: Color.BLACK);
                if (isSelected())  // This is always false :(
                   lbl.setStyle("-fx-text-fill: yellow");

                if (Rooms.getBoolean(item, "OwnerStatus")) {
                    lbl.setEffect(new DropShadow(15, Color.BLUEVIOLET));
                    lbl.setGraphic(new ImageView(
                                    new Image(getClass().getResourceAsStream("images/universal.png"))));
                } else  {
                    lbl.setGraphic(new ImageView(
                                    new Image(getClass().getResourceAsStream("images/yin-yang.png"))));
                    lbl.setEffect(new DropShadow(15, Color.WHITE));
                } 
                setGraphic(lbl); 

            }
        }
    }
4

1 に答える 1

5

-fx-selection-bar-textのセレクターであるルートデフォルトCSSセレクターで定義されたカラーパレット（cssプロパティではない）ですScene。どのように使用しているかはわかりませんが、次のように定義すると（シーンのセレクターであるため、グローバルに）、次のようになります。

.root{
    -fx-selection-bar-text: red;
}

CSSファイルで、を使用しているすべてのコントロールのcssプロパティ-fx-selection-bar-textが赤になります。ListView同様に影響を受けます（以下のコメントアウトされた元の使用法を参照してください）。
ただし、ListViewのスタイルのみをカスタマイズする場合は、この方法でデフォルトのプロパティをオーバーライドします
（注：-fx-text-fillオーバーライドされるのは、元の値のみです。使用されている場合は、元の値がコメント化されます-fx-selection-bar-text）。

/* When the list-cell is selected and focused */
.list-view:focused .list-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-background: -fx-accent;
    /* -fx-text-fill: -fx-selection-bar-text;  */
    -fx-text-fill: red;
}

/* When the list-cell is selected and selected-hovered but not focused. 
    Applied when the multiple items are selected but not focused */
.list-view:focused .list-cell:filled:selected, .list-view:focused .list-cell:filled:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    /* -fx-text-fill: -fx-selection-bar-text;  */
    -fx-text-fill: green;
}

/* When the list-cell is selected, focused and mouse hovered */
.list-view:focused .list-cell:filled:focused:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    /* -fx-text-fill: -fx-selection-bar-text;  */
    -fx-text-fill: yellow;
}

これらのCSSプロパティなどは、組み込みのcaspian.cssで使用できます。

更新：CellAPIを読むことを強くお勧めします。そこから

...ごく少数のセルのみを使用して非常に大きなデータセットを表します。各セルは「リサ​​イクル」または再利用されます。

isSelected()異なる文字列アイテムが同じセルを使用し、コードのように誤解を招く視覚効果/レンダリングで終わる可能性があることに注意してください。さらにAPIではそれは言う

セルの最も一般的な使用例はユーザーにテキストを表示することであるため、この使用例はCell内で特別に最適化されています。これは、Labeledから拡張されたCellによって行われます。つまり、Cellのサブクラスは、個別のラベルを作成してCell内に設定するのではなく、textプロパティを設定するだけで済みます。

そこで、次のようにコードをリファクタリングしました。

class RoomCell extends ListCell<String> {
    @Override
    public void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);

        if (item != null) {
            Log.debug("RoomCell called, item: "+item);
            setFont(Font.font("Segoe UI", FontWeight.BOLD, 18));
            ImageView iView = new ImageView();
            if (Rooms.getBoolean(item, "OwnerStatus")) {
                iView.setEffect(new DropShadow(15, Color.BLUEVIOLET));
                iView.setImage(new Image(getClass().getResourceAsStream("images/universal.png")));
            } else  {
                iView.setEffect(new DropShadow(15, Color.WHITE));
                iView.setImage(new Image(getClass().getResourceAsStream("images/yin-yang.png")));
            } 
            setGraphic(iView);  // The image will be displayed here
            setText(item); // The room name will be displayed here
        }
    }
}

セルのテキストのすべての-fx-text-fillスタイルは、CSSファイルの定義に従って変更されます。

ここで、セルのテキストドロップシャドウ効果とCSSファイルからの塗りつぶし色のトレードオフを
示します。-ドロップシャドウ効果を使用する場合は、現在の方法、つまりラベルの作成、テキストの設定、ドルプシャドウ効果の付与を行う必要があります。 labelおよびsetGraphic（label）。ただし、今回setText(item)はセルのテキスト（）を設定したくないため、CSSファイルのテキストの色のスタイルは効果がありません。
-一方、私がリファクタリングしたコードを好む場合は、CSSファイルで-fx-background-colorセル（拡張Labeled）をtransparentまたはnullに設定してセルを無効にし、ドロップシャドウ効果をに適用できるようにする必要があります。-fx-effect直接テキスト。セルの背景をクリアすることは、IMOのどちらの方法でも好ましい方法ではありません。コードによる説明：

Label lbl = new Label("This text will have a dropshadow on itself directly");
lbl.setEffect(new DropShadow(15, Color.BLUE));

Label another_lbl = new Label("This text will have a dropshadow applied on the background bounds, not to text");
another_lbl.setEffect(new DropShadow(15, Color.BLUE));
another_lbl.setStyle("-fx-background-color:gray");

それらをテストして違いを確認します。それで全部です。

于 2012-06-16T12:49:08.250 に答える