Unsolved ListView in ListView: Setting model of nested ListView(ListElement: cannot use script for...)
-
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 -
I am facing to this problem. Does anyone have idea for this? Thanks in advanced
-
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);