无法使用 Javascript 使用 append() 填充 QML ComboBox 模型答案

【问题标题】：QML ComboBox model can't be filled using Javascript using append()无法使用 Javascript 使用 append() 填充 QML ComboBox 模型
【发布时间】：2023-02-02 19:23:49
【问题描述】：

我正在使用 Qt 5.15.2 LTS 进行开发。

假设我有以下ComboBox：

ComboBox {
    id: myComboBox

    ListModel {
        id: myModel
    }

    model: myModel
    delegate: ItemDelegate {
        text: name
    }

    Component.onCompleted: {
        myModel.append({ "name": "1", "value": "val1" });
        myModel.append({ "name": "2", "value": "val2" });
        myModel.append({ "name": "3", "value": "val3" });
        myModel.append({ "name": "4", "value": "val4" });
    }
}

编译我的应用程序时，我得到以下 GUI 输出：

ComboBox 只是空的 - 但是在调用时 console.log("model.count: " + myModel.count) 在Component.onCompleted 中，我得到了输出qml: model.count: 4，所以模型似乎已填充但不知何故内容未显示。

但是，将 ComboBox 替换为 ListView 时：

ListView {
    id: myComboBox

    ListModel {
        id: myModel
    }

    model: myModel
    delegate: ItemDelegate {
        text: name
    }

    Component.onCompleted: {
        myModel.append({ "name": "1", "value": "val1" });
        myModel.append({ "name": "2", "value": "val2" });
        myModel.append({ "name": "3", "value": "val3" });
        myModel.append({ "name": "4", "value": "val4" });
    }
}

我得到了应得的输出：

根据 QML ComboBox docs 的说法，ComboBox 应该可以很好地填充一个 ListModel：

ComboBox {
    currentIndex: 2
    model: ListModel {
        id: cbItems
        ListElement { text: "Banana"; color: "Yellow" }
        ListElement { text: "Apple"; color: "Green" }
        ListElement { text: "Coconut"; color: "Brown" }
    }
    width: 200
    onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)
}

为什么行为差异如此之大？我需要做什么才能使用 Javascript 以正确的方式填充我的 ComboBox？

【问题讨论】：

我已经在使用 Qt 6.3 的 Ubuntu 上对其进行了测试，它按预期工作。
抱歉，我忘了说我使用的是 Qt 5.15.2 LTS。我会将其添加到我的问题中。

标签： qt listview combobox qml listmodel

【解决方案1】：

尝试设置 currentIndex 属性。这来自文档：

currentIndex

当计数为 0 时，默认值为 -1，否则为 0。

我的猜测是因为您在创建 ComboBox 之后将项目添加到模型中，currentIndex 保留其初始值 -1，因此未选择任何内容。当您打开 ComboBox 时，您可以看到这些值，但默认情况下没有被选中。

我做的另一件事是添加 textRole 属性。
ComboBox {
    id: myComboBox

    ListModel {
        id: myModel
    }

    textRole: "name"
    currentIndex: 0

    model: myModel
    delegate: ItemDelegate {
        text: name
    }

    Component.onCompleted: {
        myModel.append({ "name": "1", "value": "val1" });
        myModel.append({ "name": "2", "value": "val2" });
        myModel.append({ "name": "3", "value": "val3" });
        myModel.append({ "name": "4", "value": "val4" });
    }
}

【讨论】：