表格单元格选择1像素

Question

问题

TableView的单元格选择被关闭1像素。所选内容涵盖下/右网格线，但不包括上/左网格线。

下面是一个CSS，使其立即可见

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

​

​

下面放大了甲骨文网站中的一个TableView示例中选择的JavaFX：

​

​

在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);
        }
    }
} 

我为此创建了一个发出请求。

Answer 1

可视化调整将选择颜色放置在单元格内

要达到您希望的效果(所选内容完全位于灰色单元格边框内)，您可以使用以下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;
}

​

​

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

然后，单元格背景需要从右下方移动一个像素(焦点环和焦点环内部的内部背景)。因此，标准选择的单元格背景颜色将从原来的-fx-background-insets: 0, 1, 2;形式更改为更新形式。

意见

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

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

我更新了问题，并添加了css，那里的情况立即变得明显。

谢谢您更新问题，以包括颜色更改css，使对齐差异更加可见-我只是更新了选择颜色，而这并没有使对齐的差别像它对整个表格的单元格背景的颜色变化那样明显。