Question

我在场景中有一些TableView，我想要突出显示所选的单元格。根据{{3}}，在Cells上有一个伪类:selected，所以我尝试了以下css：

.cell:selected {
    -fx-effect: dropshadow(gaussian, 10, .2, 4, 4);
}

但样式不适用于单元格。当我使用.cell:hover时，它会按预期工作。

以下是简化的FXML：

<Pane fx:controller="Controller">
   <children>
        <TableView fx:id="table" />
   </children>
</Pane>

我正在使用它作为控制器：

public class Controller implements Initializable{
    @FXML
    private TableView<SomeClass> table;
    // some other things

    @Override
    public void initialize(URL url, ResourceBundle bundle) {
        Objects.requireNonNull(table, "Table was not injected");
        // create columns, initialize other stuff
        table.getColumns().clear();
        table.getColumns().addAll(/*some columns */);
        table.setEditable(false);
        table.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
        table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    }
}

为什么CSS不会应用于选定的单元格？

Answer 1

这里的问题是JavaFX处理单元格和行的选择的方式。

让我们暂时咨询TableViewSelectionModel的javadoc，特别是cellSelectionEnabled属性：

一个布尔属性，用于表示表是在行还是单元格选择模式。默认情况下，表处于行选择模式，这意味着无法选择单个单元格。将cellSelectionEnabled设置为true会导致单元格被选中（但不能被选中）。

我们可以得出结论，您的单元格未被标记为已选中，因为您处于行选择模式您可以通过调整css选择器来依赖行（如下所示）来解决这个问题：

.table-row-cell:selected .cell {
    -fx-effect: ...;
}

您可以在TableView上与:cell-selection和:row-selection结合使用时更有用：

.table-view:row-selection .table-row-cell:selected .cell, .table-view:cell-selection .cell:selected {
    -fx-effect: ...;
}

无论您的TableViewSelectionModel

的操作方式如何，都将适用于所选单元格

：选择的伪类样式未应用于单元格

1 个答案: