JavaFX TableView自定义ComboBox滚动时CheckBox选中状态异常排查

问题根源 #

1. 单元格复用机制导致状态丢失：JavaFX的TableView和ListView会复用单元格对象，滚动时旧单元格会重新绑定到新数据。如果CheckBox的选中状态仅存储在UI控件中，复用后会保留旧状态，引发错乱。
2. 未绑定状态到数据模型：当前代码未将CheckBox选中状态与行数据关联，状态仅存在于UI组件，未持久化到数据层。
3. ListCell未同步状态：updateItem方法仅更新Label文本，未根据当前数据更新CheckBox的选中状态。
4. ComboBox Items重复初始化：每次updateItem都清空并重新添加Items，既浪费性能也可能引发状态问题。

修复步骤及代码示例 #

1. 自定义数据模型类 #

创建专门的行数据类，存储显示文本和选中项集合，将状态持久化到数据层：

import javafx.collections.FXCollections;
import javafx.collections.ObservableSet;

public class RowData {
    private final String displayText;
    private final ObservableSet<String> selectedItems = FXCollections.observableSet();

    public RowData(String displayText) {
        this.displayText = displayText;
    }

    public String getDisplayText() {
        return displayText;
    }

    public ObservableSet<String> getSelectedItems() {
        return selectedItems;
    }
}

2. 优化TableCell实现 #

将ComboBox的Items初始化移至构造块，避免重复操作：

private Callback<TableColumn<RowData, String>, TableCell<RowData, String>> buildCallbackComboBoxTableCellAttributeMapping() {
    return tableColumn -> new TableCell<RowData, String>() {
        private final ComboBox<String> comboBox = new ComboBox<>();

        {
            ComboBoxListViewSkin comboBoxSkin = new ComboBoxListViewSkin(comboBox);
            comboBoxSkin.hideOnClickProperty().setValue(false);
            comboBox.setSkin(comboBoxSkin);
            comboBox.setSelectionModel(null);
            // 仅初始化一次Items
            String[] arrayMappingData = new String[]{"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"};
            comboBox.getItems().addAll(arrayMappingData);
            // 设置单元格工厂
            comboBox.setCellFactory(buildCallbackAttributeMapping(this));
        }

        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);
            if (empty) {
                setText(null);
                setGraphic(null);
            } else {
                setGraphic(comboBox);
            }
        }
    };
}

3. 修复ListCell的状态同步 #

修改ListCell的updateItem方法，绑定CheckBox状态到数据模型，并在复用单元格时同步状态：

import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.control.TableCell;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.util.Callback;

private Callback<ListView<String>, ListCell<String>> buildCallbackAttributeMapping(TableCell<RowData, String> tableCell) {
    return param -> new ListCell<String>() {
        private final CheckBox checkBox = new CheckBox();
        private final Label label = new Label();
        private final HBox pane = new HBox(8, checkBox, label);

        {
            checkBox.setFocusTraversable(false);
            // 监听选中状态变化，同步到数据模型
            checkBox.selectedProperty().addListener((obs, oldVal, newVal) -> {
                String item = getItem();
                RowData rowData = tableCell.getTableRow().getItem();
                if (item != null && rowData != null) {
                    if (newVal) {
                        rowData.getSelectedItems().add(item);
                    } else {
                        rowData.getSelectedItems().remove(item);
                    }
                }
            });
        }

        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);
            if (empty || item == null) {
                setGraphic(null);
            } else {
                label.setText(item);
                setGraphic(pane);
                // 根据数据模型更新CheckBox状态
                RowData rowData = tableCell.getTableRow().getItem();
                checkBox.setSelected(rowData != null && rowData.getSelectedItems().contains(item));
            }
        }
    };
}

4. 更新Demo的数据层实现 #

替换原有的ArrayList数据模型为自定义RowData，并添加多行数据用于测试滚动：

@Override
public void start(Stage stage) throws Exception {
    Pane pane = new Pane();
    TableView<RowData> tableView = new TableView<>();

    pane.setPrefHeight(400.0);
    pane.setPrefWidth(350.0);

    tableView.setLayoutX(50.0);
    tableView.setLayoutY(25.0);
    tableView.setPrefHeight(350.0);
    tableView.setPrefWidth(200.0);

    pane.getChildren().add(tableView);
    String[] tableColumns = new String[]{"Sample Column"};

    ObservableList<TableColumn<RowData, ?>> tableViewColumns = buildTableColumns(tableColumns);
    ObservableList<RowData> tableViewRows = FXCollections.observableArrayList();
    // 添加20行数据测试滚动
    for (int i = 0; i < 20; i++) {
        tableViewRows.add(new RowData("- Row " + i));
    }

    tableView.getColumns().setAll(tableViewColumns);
    tableView.getItems().setAll(tableViewRows);

    Scene scene = new Scene(pane);
    stage.setScene(scene);
    stage.show();
}

private ObservableList<TableColumn<RowData, ?>> buildTableColumns(String[] columnNames) {
    ObservableList<TableColumn<RowData, ?>> tableViewColumns = FXCollections.observableArrayList();
    for (int i = 0; i < columnNames.length; i++) {
        String columnName = columnNames[i];
        TableColumn<RowData, String> tableColumn = new TableColumn<>(columnName);
        tableColumn.setMinWidth(200);
        configureTableColumnCellRender(tableColumn);
        tableViewColumns.add(tableColumn);
    }
    return tableViewColumns;
}

private void configureTableColumnCellRender(TableColumn<RowData, String> tableColumn) {
    tableColumn.setCellValueFactory(rowValues -> new SimpleStringProperty(rowValues.getValue().getDisplayText()));
    tableColumn.setCellFactory(buildCallbackComboBoxTableCellAttributeMapping());
}

核心修复要点 #

• 状态与数据绑定：将UI控件的状态（CheckBox选中）与数据模型关联，而非存储在UI组件中。
• 单元格复用时同步状态：在updateItem方法中，必须根据当前数据模型的状态更新UI组件。
• 避免重复初始化：将静态数据（如ComboBox的Items）的初始化移至构造块，提升性能。

内容的提问来源于stack exchange，提问作者RobRoy