多选QML组合框

时间:2018-10-24 12:08:43

标签: qt combobox qml listmodel

我正在构建我的第一个应用程序,并且我想要一个带有某些选项的组合框。当选择其中一个选项时,我希望另一个组合框填充某些选项。此外,如果用户在第一个组合框中选择了第二个选项,则第二个将填充不同的选项。这可能吗?我一直在鬼混一段时间,似乎无法找出如何做。

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2

ApplicationWindow {
    id: rootWindow
    visible: true
    width: 1000
    height: 800
    title: qsTr("Hello World!")

    ComboBox{
        id: country
        model: ["USA", "India"]
        onActivated: {
            console.debug("CombBox.onActivated", index)
            console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
        }
    }
    ComboBox{
        id: state
        model: ["California", "Assam"]
        onActivated: {
            console.debug("CombBox.onActivated", index)
            console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
        }
    }
    ComboBox{
        id: city
        model: ["Los Angeles", "Dispur"]
        onActivated: {
            console.debug("CombBox.onActivated", index)
            console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
        }
    }
    ComboBox{
        id: zip
        model: ["90001", "781005"]
        onActivated: {
            console.debug("CombBox.onActivated", index)
            console.assert(currentIndex == index, "Assertion failed: property currentIndex not equal to actual parameter index")
        }
    }
}

任何有关如何传递这些信号的想法都将受到高度赞赏

1 个答案:

答案 0 :(得分:0)

我将以与javascript中相同的方式进行操作:

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480

    property var countryStateInfo: {
        "USA": {
            "California": {
                "Los Angeles": ["90001", "90002", "90003", "90004"],
                "San Diego": ["92093", "92101"]
            },
            "Texas": {
                "Dallas": ["75201", "75202"],
                "Austin": ["73301", "73344"]
            }
        },
        "India": {
            "Assam": {
                "Dispur": ["781005"],
                "Guwahati" : ["781030", "781030"]
            },
            "Gujarat": {
                "Vadodara" : ["390011", "390020"],
                "Surat" : ["395006", "395002"]
            }
        }
    }

    ColumnLayout {
        anchors.centerIn: parent
        ComboBox {
            id: box1
            currentIndex: -1
            model: getData(countryStateInfo)
        }
        ComboBox {
            id: box2
            model: box1.currentIndex < 0 ? [] : getData(countryStateInfo[box1.displayText])
            onModelChanged: currentIndex = -1
        }
        ComboBox {
            id: box3
            model: box2.currentIndex < 0 ? [] : getData(countryStateInfo[box1.displayText][box2.displayText])
            onModelChanged: currentIndex = -1
        }
        ComboBox {
            id: box4
            model: box3.currentIndex < 0 ? [] : countryStateInfo[box1.displayText][box2.displayText][box3.displayText]
            onModelChanged: currentIndex = -1
        }
    }

    function getData(arr)
    {
        var retval = [];
        for(var element in arr)
        {
            retval.push(element)
        }
        return retval;
    }
}

也许这段代码需要重构,我只是不知道如何使用关联数组作为模型