Question

问题

TableView的单元格选择偏离了1个像素。选择包括底部/右侧网格线，但不包括顶部/左侧网格线。

这是一个可以立即显示的CSS

.table-row-cell {
    -fx-background: gray;
}

enter image description here

以下是在Oracle网站上的一个JavaFX示例中选择TableView的放大图：

enter image description here

在Oracle的例子中，它可能不是很明显，但是如果你选择不同的颜色，那么很明显会有一些变化。

问题

有谁知道如何修复它？选择应覆盖所有周围的网格线或不覆盖。

代码

示例代码（取自Oracle示例，我只激活了单元格选择）：

public class TableViewSample2 extends Application {

    private TableView<Person> table = new TableView<Person>();
    private final ObservableList<Person> data =
        FXCollections.observableArrayList(
            new Person("Jacob", "Smith", "jacob.smith@example.com"),
            new Person("Isabella", "Johnson", "isabella.johnson@example.com"),
            new Person("Ethan", "Williams", "ethan.williams@example.com"),
            new Person("Emma", "Jones", "emma.jones@example.com"),
            new Person("Michael", "Brown", "michael.brown@example.com")
        );

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

    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(new Group());
        stage.setTitle("Table View Sample");
        stage.setWidth(450);
        stage.setHeight(500);

        final Label label = new Label("Address Book");
        label.setFont(new Font("Arial", 20));

        table.setEditable(true);

        TableColumn firstNameCol = new TableColumn("First Name");
        firstNameCol.setMinWidth(100);
        firstNameCol.setCellValueFactory(
                new PropertyValueFactory<Person, String>("firstName"));

        TableColumn lastNameCol = new TableColumn("Last Name");
        lastNameCol.setMinWidth(100);
        lastNameCol.setCellValueFactory(
                new PropertyValueFactory<Person, String>("lastName"));

        TableColumn emailCol = new TableColumn("Email");
        emailCol.setMinWidth(200);
        emailCol.setCellValueFactory(
                new PropertyValueFactory<Person, String>("email"));

        table.setItems(data);
        table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);

        table.getSelectionModel().setCellSelectionEnabled(true);

        final VBox vbox = new VBox();
        vbox.setSpacing(5);
        vbox.setPadding(new Insets(10, 0, 0, 10));
        vbox.getChildren().addAll(label, table);

        ((Group) scene.getRoot()).getChildren().addAll(vbox);

        stage.setScene(scene);
        stage.show();
    }

    public static class Person {

        private final SimpleStringProperty firstName;
        private final SimpleStringProperty lastName;
        private final SimpleStringProperty email;

        private Person(String fName, String lName, String email) {
            this.firstName = new SimpleStringProperty(fName);
            this.lastName = new SimpleStringProperty(lName);
            this.email = new SimpleStringProperty(email);
        }

        public String getFirstName() {
            return firstName.get();
        }

        public void setFirstName(String fName) {
            firstName.set(fName);
        }

        public String getLastName() {
            return lastName.get();
        }

        public void setLastName(String fName) {
            lastName.set(fName);
        }

        public String getEmail() {
            return email.get();
        }

        public void setEmail(String fName) {
            email.set(fName);
        }
    }
}

我为此创建了一个issue request。

Answer 1

Visual Tweak将单元格中的选择着色放置

要达到您想要的效果（选择完全在灰色单元格边框内），您可以使用以下css：

.table-cell:selected {
    -fx-border-color: transparent derive(-fx-color,5%) transparent transparent;
    -fx-background-insets: 0 1 1 0, 1 2 2 1, 2 3 3 2;
}

williams

通常选择行时，右边框设置为选择强调颜色（蓝色）而不是默认灰色。 derive(-fx-color,5%)颜色是默认的单元格边框，因此当选择单元格时，对于更新的css，我们只保留该颜色。我们实际上并不需要设置单元格底部边框（我猜是因为有一个单独的行css来处理它）。

然后，单元格背景需要从右侧和底部（以及聚焦环内的聚焦环和内部背景）移动一个像素。因此，标准选定的单元格背景颜色将从-fx-background-insets: 0, 1, 2;的原始形式更改为更新的表单。

意见

我很确定表格单元格的渲染是按设计进行的。表格视图中的网格线实际上是单元格定义区域的一部分，因此单元格之间没有间距或间隙，并且单元格也没有重叠。为实现此设计，单元区域不包括顶部和左侧线，但包括底部和右侧线。因此，当选择单元格并更改颜色以指示它被选中时，您会看到顶部和左侧网格线，但不会看到底部和右侧网格线。

此外，如果您将选择模式设置为多个（table.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);），那么选择区域看起来有点奇怪，内部网格选择视觉调整，因为网格显示通过多个选择和选择区域是不是一种连续的颜色。

我更新了问题并添加了css，情况变得非常明显。

感谢您更新问题以包含颜色变化css以使对齐差异更加明显 - 我只是更新了选择颜色并且没有使对齐差异与您的颜色变化一样明显整个表格的单元格背景。

表格单元格选择偏离1个像素

1 个答案: