JavaFX: 如何实现JFXChipView中已设置Chips的可编辑功能

已完成基础配置的JFXChipView可以实现内部Chips的可编辑状态，该组件无内置的直接开启编辑的配置参数，需要通过自定义Chip工厂的方式扩展实现。
你提到的效果参考示例：

实现步骤 #

• 自定义Chip生成工厂，替换Chip默认的静态文本节点为可编辑的输入控件（推荐用JFXTextField，和JFX组件生态兼容性更高）
• 为Chip添加交互触发逻辑，通常设置为双击Chip进入编辑状态，默认状态下输入控件隐藏边框、展示为普通文本样式，和原生Chip视觉效果一致
• 绑定编辑完成回调，在输入框失去焦点、用户按下回车时，将输入的新内容同步到JFXChipView绑定的数据源，同时将输入控件切回只读状态

核心代码示例 #

// 替换为你JFXChipView绑定的实际数据泛型
JFXChipView<String> chipView = new JFXChipView<>();
chipView.setChipFactory(item -> {
    JFXChip<String> chip = new JFXChip<>(chipView, item);
    // 初始化可编辑文本框
    JFXTextField editField = new JFXTextField(item);
    // 默认状态下隐藏边框，和原生Chip样式统一
    editField.setStyle("-fx-background-color: transparent; -fx-border-width: 0; -fx-padding: 0;");
    editField.setEditable(false);

    // 双击触发编辑
    chip.setOnMouseClicked(event -> {
        if (event.getClickCount() == 2) {
            editField.setEditable(true);
            editField.requestFocus();
            // 全选文本方便直接修改
            editField.selectAll();
        }
    });

    // 失去焦点时保存修改
    editField.focusedProperty().addListener((observable, oldValue, newValue) -> {
        if (!newValue) {
            editField.setEditable(false);
            // 同步更新数据源，这里如果是自定义对象替换为对应的set方法即可
            int index = chipView.getItems().indexOf(item);
            if (index != -1) {
                chipView.getItems().set(index, editField.getText());
            }
        }
    });

    // 按下回车时保存修改
    editField.setOnAction(event -> {
        editField.setEditable(false);
        int index = chipView.getItems().indexOf(item);
        if (index != -1) {
            chipView.getItems().set(index, editField.getText());
        }
    });

    chip.setGraphic(editField);
    // 移除默认的文本展示
    chip.setText(null);
    return chip;
});

注意事项 #

• 如果你的JFXChipView绑定的是自定义实体类而非字符串，需要自行修改数据源同步的逻辑，调用实体类对应的属性修改方法即可
• 可以根据需求调整编辑触发逻辑，比如添加编辑图标按钮点击触发编辑，不需要仅局限于双击交互

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