qt qml how can I create a list view feed item containing an icon and description?

Question

I created an example. I do not know why I get a crash when I try to resize the window horizontally. Crash happens only when iconVisible is true

here is the qml code from the main, paste this in a hello world qt quick controls 2 project to test:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.XmlListModel 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Page {
        anchors.fill: parent
        XmlListModel{
            id : modelId
            namespaceDeclarations: "declare namespace media = 'http://search.yahoo.com/mrss/';"
            source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags="
            query: "//item[title and media:thumbnail and media:content]"
        }

        ListView {
            anchors.fill: parent
            model: modelId
            Layout.fillWidth: true
            delegate:  itemDelegateId
            ScrollBar.vertical: ScrollBar {}
        }

        Component {
            id: itemDelegateId


            Rectangle {
                property bool iconVisible: true
                property string contentText: "contentaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

                property double itemHeight: 100
                property int titleTextSize: 32
                property int columnLayoutLeftMargin: (iconVisible)? 20 : 0
                property string borderColor: "black"
                property int iconSize: (iconVisible)? 40 : 0

                height : itemHeight
                anchors {
                    left: parent.left
                    right: parent.right
                }
                border.color: borderColor
                border.width: 1

                RowLayout {
                    anchors {
                        fill: parent
                    }

                    Rectangle {
                        id: notificationIconId
                        visible: iconVisible
                        anchors {
                            top: parent.top
                        }
                        height: iconSize
                        width: iconSize
                        Image {
                            anchors.fill: parent
                            fillMode: Image.PreserveAspectFit
                        }
                    }

                    ColumnLayout {
                        id: columnLayoutId
                        anchors {
                            top: parent.top
                            bottom: parent.bottom
                            left: notificationIconId.right
                            right: parent.right
                        }

                        Text {
                            id: contentId
                            anchors {
                                top: parent.top
                                bottom: parent.bottom
                            }
                            Layout.fillWidth: true
                            font.pixelSize: 20
                            elide: Text.ElideRight
                            maximumLineCount: 3
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                            color: "black"
                            text: contentText
                        }
                    }
                }
            }
        }
    }
}

The code has errors: qrc:/main.qml:63:29: QML Image: Cannot open: qrc:/ic_notifications_item.png qrc:/main.qml:59: ReferenceError: topMarginsSpacing is not defined qrc:/main.qml:84: ReferenceError: columnSpacing is not defined — Mitch

Mitch Mitch · Accepted Answer · 2017-05-04T07:03:30

There are a few issues here. The first is that Layout.fillWidth: true has no effect, as Page is not a layout:

    ListView {
        anchors.fill: parent
        model: modelId
        Layout.fillWidth: true // remove
        delegate:  itemDelegateId
        ScrollBar.vertical: ScrollBar {}
    }

The second is that you shouldn't specify width and height for items in a layout:

                Rectangle {
                    id: notificationIconId
                    visible: iconVisible
                    anchors {
                        top: parent.top
                    }
                    height: iconSize // Should be Layout.preferredHeight: iconSize
                    width: iconSize // Should be Layout.preferredWidth: iconSize
                    Image {
                        anchors.fill: parent
                        fillMode: Image.PreserveAspectFit
                    }
                }

You can't use horizontal anchors on an item managed by a horizontal layout:

                ColumnLayout {
                    id: columnLayoutId
                    anchors {
                        top: parent.top
                        bottom: parent.bottom
                        // This ColumnLayout is managed by a RowLayout, so these two lines have to go
                        left: notificationIconId.right
                        right: parent.right
                    }
                }

Same thing for the Text item:

                    Text {
                        id: contentId
                        // Can't use vertical anchors on an item that is managed by a ColumnLayout
                        anchors {
                            top: parent.top
                            bottom: parent.bottom
                        }
                        Layout.fillWidth: true
                        font.pixelSize: 20
                        elide: Text.ElideRight
                        maximumLineCount: 3
                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                        color: "black"
                        text: contentText
                    }

With all of those issues fixed, it seems to work as expected:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.XmlListModel 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Page {
        anchors.fill: parent
        XmlListModel{
            id : modelId
            namespaceDeclarations: "declare namespace media = 'http://search.yahoo.com/mrss/';"
            source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags="
            query: "//item[title and media:thumbnail and media:content]"
        }

        ListView {
            anchors.fill: parent
            model: modelId
            delegate:  itemDelegateId
            ScrollBar.vertical: ScrollBar {}
        }

        Component {
            id: itemDelegateId


            Rectangle {
                property bool iconVisible: true
                property string contentText: "contentaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

                property double itemHeight: 100
                property int titleTextSize: 32
                property int columnLayoutLeftMargin: (iconVisible)? 20 : 0
                property string borderColor: "black"
                property int iconSize: (iconVisible)? 40 : 0

                height : itemHeight
                anchors {
                    left: parent.left
                    right: parent.right
                }
                border.color: borderColor
                border.width: 1

                RowLayout {
                    anchors {
                        fill: parent
                    }

                    Rectangle {
                        id: notificationIconId
                        visible: iconVisible
                        anchors {
                            top: parent.top
                        }
                        Layout.preferredHeight: iconSize
                        Layout.preferredWidth: iconSize
                        Image {
                            anchors.fill: parent
                            fillMode: Image.PreserveAspectFit
                        }
                    }

                    ColumnLayout {
                        id: columnLayoutId
                        anchors {
                            top: parent.top
                            bottom: parent.bottom
                        }

                        Text {
                            id: contentId
                            Layout.fillWidth: true
                            font.pixelSize: 20
                            elide: Text.ElideRight
                            maximumLineCount: 3
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                            color: "black"
                            text: contentText
                        }
                    }
                }
            }
        }
    }
}

qt qml how can I create a list view feed item containing an icon and description?

1 Answers