主页 / coding / 问题 / 78340790
Accepted
Pavel_K
Asked: 2024-04-17 20:00:12 +0800 CST

如何使用 CSS 设置选定但未聚焦的表格行的背景颜色？

  • 772

这是我的代码：

public class JavaFxTest7 extends Application {

    private static class Student {

        private int id;

        private int mark;

        public Student(int id, int mark) {
            this.id = id;
            this.mark = mark;
        }

        public int getId() {
            return id;
        }

        public int getMark() {
            return mark;
        }
    }

    private TableView<Student> table = new TableView<>(FXCollections.observableList(
            List.of(new Student(1, 3), new Student(2, 4), new Student(3, 5))));

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        var idColumn = new TableColumn<Student, Integer>();
        idColumn.setCellValueFactory((data) ->  new ReadOnlyObjectWrapper<>(data.getValue().getId()));
        var markColumn = new TableColumn<Student, Integer>();
        markColumn.setCellValueFactory((data) ->  new ReadOnlyObjectWrapper<>(data.getValue().getMark()));
        table.getColumns().addAll(idColumn, markColumn);

        VBox root = new VBox(new TextField(), table);
        var scene = new Scene(root, 400, 300);
        var css= this.getClass().getResource("test7.css").toExternalForm();

        scene.getStylesheets().addAll(css);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

我需要将黄色设置为选定但不聚焦的表格行的背景颜色。绿色作为聚焦表行的背景颜色。我试过 ：

.table-row-cell:selected:focused {
    -fx-background-color: green;
    -fx-background-insets: 0;
}

.table-row-cell:selected {
    -fx-background-color: yellow;
    -fx-background-insets: 0;
}

但它给出了这个结果：

在此输入图像描述

和这段代码：

.table-row-cell:focused {
    -fx-background-color: green;
    -fx-background-insets: 0;
}

.table-row-cell:selected {
    -fx-background-color: yellow;
    -fx-background-insets: 0;
}

给出了这个结果：

在此输入图像描述

有人能说一下该怎么做吗？

java

1 个回答

  1. Best Answer

    所选表格行和单元格的 CSS 规则相当复杂。在默认样式表中它们的定义如下：

    /* Selected rows */
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

/* Selected when control is not focused */
.table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected {
    -fx-background: -fx-selection-bar-non-focused;
    -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
}

/* focused cell (keyboard navigation) */
.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused,
.table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused {
    -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
    -fx-background-insets: 0, 1, 2;
}

/***** ROW CELLS **************************************************************/
/* Each row in the table is a table-row-cell. Inside a table-row-cell is any
   number of table-cell. */
.table-row-cell {
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0;
    -fx-text-fill: -fx-text-background-color;
}
.table-row-cell:odd {
    -fx-background: -fx-control-inner-background-alt;
}

/***** INDIVIDUAL CELLS ********************************************************/
.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
}

    简而言之，fx-background-color行设置为查找的颜色（带有由嵌套背景实现的边框）。-fx-background对于-fx-background-color行中未选定的单个单元格， 发送到null, （透明），以便您看到该行的背景；对于选定的单个单元格，则设置为-fx-background。

    当选择行并获得焦点时，行和单个单元格的查找颜色-fx-background将设置为另一种名为 的查找颜色，当选择行但未获得焦点时，行和单元格的查找颜色再次设置为。-fx-selection-bar-fx-background-fx-selection-bar-non-focused

    我无法完全解释您观察到的确切行为，但实现您想要的最简单的方法是设置用于选择的查找颜色：

    .table-view {
    -fx-selection-bar: green;
    -fx-selection-bar-non-focused: yellow;
}
    • 3

相关问题