QT Quick实现：根据Item类型切换右侧编辑视图的方案咨询

1. 定义项目数据模型 #

先在C++层封装项目数据，确保能被QML访问：

• 创建Project类（继承QObject），用Q_PROPERTY声明项目类型（如type）和各个可编辑属性（如volume、isEnabled），示例代码：

class Project : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString type READ type CONSTANT)
    Q_PROPERTY(int volume READ volume WRITE setVolume NOTIFY volumeChanged)
    Q_PROPERTY(bool isEnabled READ isEnabled WRITE setIsEnabled NOTIFY isEnabledChanged)
public:
    explicit Project(QObject *parent = nullptr) : QObject(parent) {}
    QString type() const { return m_type; }
    int volume() const { return m_volume; }
    bool isEnabled() const { return m_isEnabled; }

    void setVolume(int volume) {
        if (m_volume != volume) {
            m_volume = volume;
            emit volumeChanged();
        }
    }
    void setIsEnabled(bool enabled) {
        if (m_isEnabled != enabled) {
            m_isEnabled = enabled;
            emit isEnabledChanged();
        }
    }
    void setType(const QString& type) { m_type = type; }
signals:
    void volumeChanged();
    void isEnabledChanged();
private:
    QString m_type;
    int m_volume = 50;
    bool m_isEnabled = true;
};

• 创建列表模型（继承QAbstractListModel），管理所有Project对象，重写rowCount、data等方法，注册到QML作为左侧列表的数据源。

2. 左侧列表与选中项绑定 #

在QML中用ListView展示项目列表，绑定到上述模型，并维护选中项引用：

ListView {
    id: projectList
    model: projectModel // 来自C++注册的列表模型
    width: parent.width * 0.3
    delegate: Text {
        text: model.name
        padding: 10
        MouseArea {
            anchors.fill: parent
            onClicked: selectedProject = projectList.model.get(index)
        }
    }
    property var selectedProject: null
}

3. 动态加载对应QML编辑视图 #

右侧用Loader组件，根据选中项目的type动态切换QML文件：

Loader {
    id: editorLoader
    anchors.left: projectList.right
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    source: selectedProject ? "qrc:/editors/" + selectedProject.type + "Editor.qml" : ""
    onLoaded: {
        item.project = selectedProject
    }
}

比如AudioProject对应qrc:/editors/AudioProjectEditor.qml，VideoProject对应qrc:/editors/VideoProjectEditor.qml，需将这些QML文件添加到Qt资源文件中。

4. 编辑视图与数据双向绑定 #

在每个类型对应的编辑QML文件中，直接绑定项目属性：

// AudioProjectEditor.qml
Rectangle {
    property Project project: null
    color: "#f0f0f0"
    padding: 20

    Column {
        Slider {
            width: parent.width
            value: project ? project.volume : 0
            onValueChanged: if (project) project.volume = value
        }
        Switch {
            text: "启用项目"
            checked: project ? project.isEnabled : false
            onCheckedChanged: if (project) project.isEnabled = checked
        }
    }
}

控件修改会直接同步到Project对象，C++层修改数据时，QML控件也会自动更新。

5. 额外注意点 #

• 用枚举管理项目类型字符串，避免拼写错误。
• 若频繁切换项目类型，可改用CacheLoader（Qt Quick Controls 2提供）缓存已加载视图，提升切换效率。

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