QML：GridView 模型对所有子项具有相同的价值答案

【问题标题】：QML : GridView Model Have Same Value to All Children ItemQML：GridView 模型对所有子项具有相同的价值
【发布时间】：2017-02-01 13:30:52
【问题描述】：

我是 QML 编程的新手。在从 JSON 附加子项值后，我遇到了 QML GridView-Model 的奇怪行为。孩子数与 JSON 长度匹配，但所有值都相同。

这是我的代码：

        Item{
            id: prod_item_view
            x: 73
            y: 137
            width: 920
            height: 630
            anchors.bottom: parent.bottom
            anchors.bottomMargin: -767
            anchors.right: parent.right
            anchors.rightMargin: -1023
            focus: true    

            GridView{
                id: gridview
                focus: true
                anchors.bottomMargin: 0
                anchors.topMargin: 0
                flickDeceleration: 750
                maximumFlickVelocity: 1500
                anchors.centerIn: parent
                layoutDirection: Qt.LeftToRight
                flow: GridView.FlowLeftToRight
                boundsBehavior: Flickable.StopAtBounds
                snapMode: GridView.SnapToRow
                anchors.fill: parent
                anchors.margins: 20
                delegate: delegate_item_view
                model: groceryItem_listModel
                cellWidth: 215
                cellHeight: 315
            }

            ListModel {
                id: groceryItem_listModel
                function parseDataProduct(){
                    var items = JSON.parse(grocery_prod_list)
                    for(var x in items) {
                        if(items[x].name.indexOf("Test") > -1){
                            show_prod_name = items[x].name.replace("Test","")
                        }else{
                            show_prod_name = items[x].name.replace("/t","")
                        }
                        show_prod_price = insert_flg(items[x].total)
                        show_prod_disc = "Disc: " + insert_flg(items[x].discount)
                        show_prod_init_price = insert_flg(items[x].price)
                        show_prod_sku = items[x].sku
                        show_prod_image = items[x].image.replace(urlPath1,urlPath2)
                        show_prod_image_qr = items[x].qrcode.replace(urlPath1,urlPath2)
                        //Appending Product Items
                        groceryItem_listModel.append({"prod_name": show_prod_name,"prod_price":show_prod_price,"prod_disc": show_prod_disc,"prod_init_price":show_prod_init_price,"prod_sku":show_prod_sku,"prod_image":show_prod_image,"prod_image_qr":show_prod_image_qr})
                    }
                    //grocery_prod_list = ""
                    for(var i = 0; i < groceryItem_listModel.count; ++i) {
                        console.log(groceryItem_listModel.get(i).prod_name +" -> "+ groceryItem_listModel.get(i).prod_sku);
                    }
                }
                Component.onCompleted: {parseDataProduct()}
            }

            Component{
                id: delegate_item_view
                GroceryItemView{
                    id: item_view
                    prod_name: (prod_name_temp == "") ? show_prod_name : prod_name_temp
                    prod_price: (prod_price_temp == "") ? show_prod_price : prod_price_temp
                    prod_disc: (prod_disc_temp == "") ? show_prod_disc : prod_disc_temp
                    prod_init_price: (prod_init_price_temp == "") ? show_prod_init_price : prod_init_price_temp
                    prod_sku: (prod_sku_temp == "") ? show_prod_sku : prod_sku_temp
                    prod_image: (prod_image_temp == "") ? show_prod_image : prod_image_temp
                    function defineTemp(){
                        prod_disc_temp = show_prod_disc
                        prod_name_temp = show_prod_name
                        prod_price_temp = show_prod_price
                        prod_init_price_temp = show_prod_init_price
                        prod_sku_temp = show_prod_sku
                        prod_image_temp = show_prod_image
                        prod_image_qr_temp = show_prod_image_qr
                    }
                    Component.onCompleted: {defineTemp()}

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            abc.counter = timer_value
                            my_timer.restart()
                            item_view.prod_init_price = ""
                            item_view.prod_disc = ""
                            item_view.prod_price = prod_sku_temp
                            item_view.font_size = 20
                            item_view.prod_image = prod_image_qr_temp
                            item_view.image_top_position = -42
                            item_view.text_click = false
                        }
                        onDoubleClicked: {
                            item_view.prod_price = prod_price_temp
                            item_view.prod_disc = prod_disc_temp
                            item_view.prod_init_price = prod_init_price_temp
                            item_view.prod_image = prod_image_temp
                            item_view.font_size = 30
                            item_view.image_top_position = 0
                            item_view.text_click = true
                        }
                    }
                }
            }
        }
    }   
}

JSON 示例如下：

'[{"sku":"PBSDIM00139","price":"25000","discount":"9500","total":"15500","name":"Bali Alus Traditional Spa Essential Scrub with VCO Chocolate - 100 g","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Bali_Alus_Traditional_Spa_Essential_Scrub_with_VCO_Chocolate_-_100_g1.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00139.svg"},{"sku":"PBSDIM00141","price":"25000","discount":"9500","total":"15500","name":"Bali Alus Traditional Spa Essential Scrub with VCO Milk - 100 g","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Bali_Alus_Traditional_Spa_Essential_Scrub_with_VCO_Milk_-_100_g1.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00141.svg"},{"sku":"PBSDIM00142","price":"25000","discount":"9500","total":"15500","name":"Bali Alus Traditional Spa Essential Scrub with VCO Strawberry - 100 g","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Bali_Alus_Traditional_Spa_Essential_Scrub_with_VCO_Strawberry_-_100_g1.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00142.svg"},{"sku":"PBSDIM00174","price":"30600","discount":"10100","total":"20500","name":"Bath & Body Works - Ginger Bread","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Bath-and-Body-Works-Pocketbac---Ginger-Bread.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00174.svg"},{"sku":"PBSDIM00176","price":"30600","discount":"10100","total":"20500","name":"Bath & Body Works - Hand Gel - Sugar & Spice","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Bath-and-Body-Works-Pocketbac---Sugar--Spice.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00176.svg"},{"sku":"PBSDIM00175","price":"30600","discount":"10100","total":"20500","name":"Bath & Body Works - Hand Gel - Sugar Plum Dream","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Bath-and-Body-Works-Pocketbac---Sugar-Plum-Dream.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00175.svg"},{"sku":"PBSDIM00151","price":"325600","discount":"120700","total":"204900","name":"Humphrey Bust Firming Lotion","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Humphrey-Bust-Firming-Lotion1.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00151.svg"},{"sku":"PBSDIM00149","price":"73800","discount":"18800","total":"55000","name":"Humphrey Serum Vit C Whitening Plus","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Humphrey-Serum-Vit-C-Whitening-Plus.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00149.svg"},{"sku":"PBSDIM00164","price":"37600","discount":"17600","total":"20000","name":"I am Real Mask - Tony Moly","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/IM_REAL_MASK_-_TONY_MOLY_Nutrition1.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00164.svg"},{"sku":"PBSDIM00144","price":"99600","discount":"46600","total":"53000","name":"Mane N Tail Original Shampoo - 60 mL","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Mane-N-Tail-Original-Shampoo---60-mL.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00144.svg"},{"sku":"PBSDIM00143","price":"111500","discount":"16600","total":"94900","name":"Murrays Pomade Edgewax","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Murrays_Pomade_Edgewax1.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00143.svg"},{"sku":"PBSDIM00146","price":"53400","discount":"8900","total":"44500","name":"Mustika Ratu Body Butter Coffee Kopi - 200 g","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Mustika_Ratu_Body_Butter_Coffee_Kopi_-_200_g.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00146.svg"},{"sku":"PBSDIM00150","price":"30200","discount":"9700","total":"20500","name":"Natural Honey Body Lotion Antioxidant - 200 mL","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Natural-Honey-Body-Lotion-Antioxidant---200-mL.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00150.svg"},{"sku":"PBSDIM00140","price":"143400","discount":"23900","total":"119500","name":"Sebamed Clear Face Cleansing Facial Toner - 150 ML","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/Sebamed_Clear_Face_Cleansing_Facial_Toner_-_150_ML1.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00140.svg"},{"sku":"PBSDIM00158","price":"58470","discount":"23470","total":"35000","name":"Vaseline Petroleum Test","image":"http:\/\/dimo.popbox.asia\/assets\/images\/uploaded\/vaseline-petroleum-jelly-7.5-oz.png","qrcode":"http:\/\/dimo.popbox.asia\/assets\/images\/qr\/PBSDIM00158.svg"}]'

打印出来的 Console.log 如下：

qml: Bali Alus Traditional Spa Essential Scrub with VCO Chocolate - 100 g -> PBSDIM00139
qml: Bali Alus Traditional Spa Essential Scrub with VCO Milk - 100 g -> PBSDIM00141
qml: Bali Alus Traditional Spa Essential Scrub with VCO Strawberry - 100 g -> PBSDIM00142
qml: Bath & Body Works - Ginger Bread -> PBSDIM00174
qml: Bath & Body Works - Hand Gel - Sugar & Spice -> PBSDIM00176
qml: Bath & Body Works - Hand Gel - Sugar Plum Dream -> PBSDIM00175
qml: Humphrey Bust Firming Lotion -> PBSDIM00151
qml: Humphrey Serum Vit C Whitening Plus -> PBSDIM00149
qml: I am Real Mask - Tony Moly -> PBSDIM00164
qml: Mane N Tail Original Shampoo - 60 mL -> PBSDIM00144
qml: Murrays Pomade Edgewax -> PBSDIM00143
qml: Mustika Ratu Body Butter Coffee Kopi - 200 g -> PBSDIM00146
qml: Natural Honey Body Lotion Antioxidant - 200 mL -> PBSDIM00150
qml: Sebamed Clear Face Cleansing Facial Toner - 150 ML -> PBSDIM00140
qml: Vaseline Petroleum  -> PBSDIM00158

【问题讨论】：

并非所有代码都与您的问题相关。你本可以减少它。而且控制台打印出来的值都不一样。
@DuKes0mE ：哦，我明白了，你能检查一下减少的吗？
我相信你的代表有问题。正如您在 JSON 中看到的那样，它仅在整个 JSON 语句中显示 last 产品，而不是全部显示。可能是因为您在委托完成时调用了defineTemp()。
你为什么不像prod_name: show_prod_name一样声明它
嗨@DuKes0mE：是的，我已经尝试过您的建议，但仍然保持不变...所有值都转到最后一个 JSON 值...

标签： gridview model qml children

【解决方案1】：

好的，我找到了解决您问题的方法：

首先，您将show_prod_name 等变量定义为全局属性。因此，每次将项目附加到 ListModel 时，基本上都会覆盖 show_prod_name。这就是为什么该值始终是最后一个 JSON 项。事实上，您甚至可能不需要将其作为全局变量。

其次，您没有将委托设置为相应的密钥。例如，它应该是 prod_name 而不是 show_prod_name。您需要使用密钥：

groceryItem_listModel.append({"prod_name": show_prod_name," ....})

所以你基本上可以将你的委托减少到：

Component{
                id: delegate_item_view
                GroceryItemView{
                    id: item_view
                    prod_name: prod_name
                    prod_price: prod_price
                    prod_disc: prod_disc
                    prod_init_price: prod_init_price
                    prod_sku: prod_sku
                    prod_image: prod_image

                    // ... you need to apply this also to your mouse area stuff
}

在我看来，您不需要defineTemp()，因为您检查字符串是否为空。如果它是空的，用一个对我来说没有意义的空字符串替换它。

【讨论】：

【解决方案2】：

非常感谢@DuKes0mE

我已将代码更改如下：

关于委托项目：

Component{
            id: delegate_item_view
            GroceryItemView{
                id: item_view
                prod_name: prod_name_
                prod_price: prod_price_
                prod_disc: prod_disc_
                prod_init_price: prod_init_price_
                prod_sku: prod_sku_
                prod_image: prod_image_
                prod_image_qr: prod_image_qr_

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        abc.counter = timer_value
                        my_timer.restart()
                        item_view.prod_image_vis = false
                        item_view.prod_image_qr_vis = true
                        item_view.text_click = false
                        item_view.prod_price_vis = false
                        item_view.prod_sku_vis = true
                    }
                    onDoubleClicked: {
                        item_view.prod_image_vis = true
                        item_view.prod_image_qr_vis = false
                        item_view.text_click = true
                        item_view.prod_price_vis = true
                        item_view.prod_sku_vis = false
                    }
                }
            }

关于js函数：

 function parseDataProduct(){
    //Undefined the gridview model
    gridview.model = undefined
    if(!groceryItem_listModel.count){
        var items = JSON.parse(grocery_prod_list)
        for(var x in items) {
            var show_prod_name = items[x].name
            var show_prod_price = insert_flg(items[x].total)
            var show_prod_disc = "Disc: " + insert_flg(items[x].discount)
            var show_prod_init_price = insert_flg(items[x].price)
            var show_prod_sku = items[x].sku
            var show_prod_image = items[x].image.replace(urlPath1,urlPath2)
            var show_prod_image_qr = items[x].qrcode.replace(urlPath1,urlPath2)
            //Appending Product Items
            groceryItem_listModel.append({"prod_name_": show_prod_name,
                                             "prod_price_":show_prod_price,
                                             "prod_disc_": show_prod_disc,
                                             "prod_init_price_": show_prod_init_price,
                                             "prod_sku_": show_prod_sku,
                                             "prod_image_": show_prod_image,
                                             "prod_image_qr_": show_prod_image_qr})
        }
    }else{
        return
    }
    //Re-define the gridview model
    gridview.model = groceryItem_listModel
}

}

现在一切正常。

fixed_grocery_view

【讨论】：