ListView in ListView: Setting model of nested ListView(ListElement: cannot use script for...)

Grmume

Hello,

I'm new to qt and qml and I'm having trouble creating the layout for my first application. I'm trying to create a Layout with a vertical List as its root element. Each entry of the list consists of a title and a very long row of images. Each row can be scrolled left and right individually (this is why I'm using nested ListViews instead of a gridView). Basically I'm trying to replicate the kind of layout you can see on netflix: https://c1.staticflickr.com/5/4594/38938560151_19e81b9f98.jpg

I have created a component for the row (called CategoryView), which is a Item component which contains the title text and a ListView component.

I have then tried to place a CategoryView on a Page component and configure it (setting title and entries). But it seems there is a problem setting the model of the ListView inside the CategoryView like this. When I'm trying to run my application the error I'm getting is: Home.ui.qml:14 ListElement: cannot use script for property value.
After googling the error messages, it seems to me like I'm not able to set the model of the ListView this way. Is this really the case? The suggested solutions were adding scripts to add the required fields during launch, but I'm not quite sure how to apply this here (especially since I'd like to edit this file in QtCreator, which does not like scripts in the *.ui.qml files).
Is there a way that I can achieve the layout I described and fully configure the CategoryViews (especially setting the contents) from the qml files(without relying on the application to somehow fill the lists in the Categories)? If not how can I add the categories from the application (I'm using python and pyqt, but I guess the procedure is similar in c++)?

Thanks in advance.

CategoryView:

import QtQuick 2.0
import QtQuick.Shapes 1.11

Item {
    id: item1
    anchors.top: parent.top
    anchors.topMargin: 0
    anchors.right: parent.right
    anchors.rightMargin: 0
    anchors.left: parent.left
    anchors.leftMargin: 0

    Column {
        id: column
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        Text {

            text: categoryTitle
            font.family: "Roboto"
        }

        Shape {
            id: lineShape
            height: 2
            width: parent.width*0.3
            anchors.top: parent.top
            anchors.topMargin: 23
            anchors.left: parent.left
            anchors.leftMargin: 0
            ShapePath {
                strokeWidth: lineShape.height
                strokeColor: "black"
                strokeStyle: ShapePath.SolidLine
                startX: 0; startY: 0
                PathLine { x: lineShape.width; y: 0 }
            }
        }

        ListView {
            id: listView
            height: 80
            anchors.top: parent.top
            anchors.topMargin: 28
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            orientation: ListView.Horizontal
            flickableDirection: Flickable.HorizontalFlick
            model: listModel
            delegate: Item {
                x: 5
                width: 80
                height: 80
                Column {
                    id: col1
                    Rectangle {
                        width: 40
                        height: 40
                        color: colorCode
                    }

                    Text {
                        text: name
                        font.bold: true
                    }
                }
            }
        }
    }
}

Home.ui.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

Page {
    id: page
    title: qsTr("Home")
    anchors.fill: parent
    ListView {
        id: listView
        contentHeight: 160
        anchors.fill: parent
        model: ListModel {
            ListElement {
                listModel: results.titles /* Offending line */
                width: 600
                categoryTitle: "Popular"
                colorCode: "grey"
            }
        }
        delegate: CategoryView {
        }
    }
}

Best regards,
Grmume

ducdanganhit

I am facing to this problem. Does anyone have idea for this? Thanks in advanced

Shrinidhi Upadhyaya

Hi @Grmume , yup you are correct you cannot directly assign the value there in the model,but you can use the setProperty function.

Here is the sample line of code please have a look:-

 model.setProperty(index, "resultsTitles", results.titles);