如何在JavaFX的MVVM模式中使用TabPane标签与选择模型

首先，你对标签的单向绑定方案是正确的：Bindings.bindContent(tabPane.getTabs(), viewModel.getTabPaneTabs())可以实现ViewModel中标签列表的变更同步到View的TabPane。

但直接绑定selectionModelProperty()的方式不可行，原因是TabPane.selectionModelProperty()返回的是只读属性，无法进行双向绑定；且你在ViewModel中自定义的SingleSelectionModel和TabPane默认的选择模型是两个独立实例，绑定对象本身无法同步选中状态。

下面提供两种更合理的实现方案：

方案一：绑定选中索引（推荐，降低UI类耦合） #

这种方式用IntegerProperty在ViewModel中维护选中标签的索引，避免直接依赖JavaFX的UI类。

修改ViewModel： #

public class ViewModel {
    private final ObservableList<Tab> tabPaneTabs = FXCollections.observableArrayList();
    // 用IntegerProperty存储选中标签的索引，初始值-1表示未选中
    private final IntegerProperty selectedTabIndex = new SimpleIntegerProperty(-1);

    public ObservableList<Tab> getTabPaneTabs() {
        return tabPaneTabs;
    }

    // 暴露属性供绑定
    public IntegerProperty selectedTabIndexProperty() {
        return selectedTabIndex;
    }

    public int getSelectedTabIndex() {
        return selectedTabIndex.get();
    }

    public void setSelectedTabIndex(int index) {
        selectedTabIndex.set(index);
    }
}

修改View的initialize方法： #

private void initialize() {
    // 标签内容单向绑定
    Bindings.bindContent(this.tabPane.getTabs(), this.getViewModel().getTabPaneTabs());
    // 选中索引双向绑定
    this.getViewModel().selectedTabIndexProperty()
        .bindBidirectional(this.tabPane.getSelectionModel().selectedIndexProperty());
}

方案二：绑定选中标签对象 #

如果你的业务逻辑需要直接操作Tab对象，可以用ObjectProperty<Tab>维护选中项：

修改ViewModel： #

public class ViewModel {
    private final ObservableList<Tab> tabPaneTabs = FXCollections.observableArrayList();
    private final ObjectProperty<Tab> selectedTab = new SimpleObjectProperty<>();

    public ObservableList<Tab> getTabPaneTabs() {
        return tabPaneTabs;
    }

    public ObjectProperty<Tab> selectedTabProperty() {
        return selectedTab;
    }

    public Tab getSelectedTab() {
        return selectedTab.get();
    }

    public void setSelectedTab(Tab tab) {
        selectedTab.set(tab);
    }
}

修改View的initialize方法： #

private void initialize() {
    Bindings.bindContent(this.tabPane.getTabs(), this.getViewModel().getTabPaneTabs());
    // 选中项双向绑定
    this.getViewModel().selectedTabProperty()
        .bindBidirectional(this.tabPane.getSelectionModel().selectedItemProperty());
}

为什么不推荐自定义SingleSelectionModel？ #

你在ViewModel中自定义的SingleSelectionModel会让ViewModel直接依赖JavaFX的UI组件类，违背了MVVM模式中ViewModel独立于UI框架的设计原则。使用属性（IntegerProperty/ObjectProperty）的方式更简洁，也更符合MVVM的分层思想。

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