Trouble with ListView Delegate

[Bradford Smith]

I've got a problem with Instantiating items in a ListView. The delegate Rectangles aren't showing up at all no matter what I try, almost like they have no width or height at all.

Code: [Select]

ListView {
    id: listView_Channels
    Layout.fillWidth: true
    height: count * 24

    Rectangle {
        id: lv_Channels_BG
        anchors.fill: parent
        color: "black"
    }

    model: ["Mask", "BaseColor", "AO", "Roughness", "Metallic"]
    delegate: Rectangle {
        width: 24
        height: 24
        color: index % 2 == 0 ? "red" : "green"
        border.color: "white"
        border.width: 2

        AlgLabel {
            text: index  + " " + modelData
        }
    }
}


[Bradford Smith]

Part of the issue was the background rectangle. Making that slightly transparent, and pushing it back in Z, revealed part of widget (that was otherwise hidden by the background on top).

I'm still stuck getting my "Row Background (row_Channel)" to appear however. The Label and ToolButton appear now, but the alternate colored bg rectangles still won't show.

Code: [Select]

ListView {
    id: listView_Channels
    Layout.fillWidth: true
    height: count * 24
    // spacing: 4

    Rectangle {
        id: lv_Channels_BG
        anchors.fill: parent
        color: "#33000000"
        z: -1
    }

    model: ["Mask", "BaseColor", "AO", "Roughness", "Metallic"]
    delegate: Rectangle {
        id: row_Channel
        Layout.fillWidth: true
        height: 24
        color: index % 2 == 0 ? "red" : "green"
        border.color: "white"
        border.width: 2

        RowLayout {
            id: layout_ChannelControls
            Layout.fillWidth: true

            AlgLabel {
                id: label_Channel
                text: index  + " " + modelData
            }
            AlgToolButton {
                id: remove_Channel
                Layout.alignment: Qt.AlignRight
                width: label_Channel.height
                height: label_Channel.height

                Image {
                    id: icon_Minus
                    anchors.fill: parent
                    anchors.margins: 1
                    source: "img/icon_minus.svg"
                    sourceSize.width: width
                    sourceSize.height: height
                    fillMode: Image.PreserveAspectFit
                    opacity: 1.0
                    mipmap: false
                }
            }
        }
    }
}


[Bradford Smith]

Think I finally cobbled something together. Not entirely sure why it works, but anchoring the BG Rectangle to an Item delegate seems to give me the starting point I'm looking for. Now maybe I can abstract it a bit and save it off as reusable component.

Code: [Select]

ListView {
    id: listView_Channels
    Layout.fillWidth: true
    height: count * 23
    spacing: -1

    // Rectangle {
    //     id: lv_Channels_BG
    //     anchors.fill: parent
    //     color: "#33000000"
    //     z: -1
    // }

    model: ["Mask", "BaseColor", "AO", "Roughness", "Metallic"]
    delegate: Item {
        id: row_Channel
        width: parent.width
        height: 24

        Rectangle {
            anchors.fill: parent
            anchors.bottomMargin: -1
            color: index % 2 == 0 ? "#202020" : "#262626"
            border.color: "#4d4d4d"
            border.width: 1
        }

        AlgLabel {
            id: label_Channel
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            anchors.leftMargin: 8
            text: index  + ": " + modelData
        }
        AlgToolButton {
            id: remove_Channel
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.rightMargin: 1
            height: parent.height - 2
            width: height

            Image {
                id: icon_Minus
                anchors.fill: parent
                anchors.margins: 1
                source: "img/icon_minus.svg"
                sourceSize.width: width
                sourceSize.height: height
                fillMode: Image.PreserveAspectFit
                opacity: 1.0
                mipmap: false
            }
        }
    }
}


[ntisitho]

You can't use Layout.fillWidth: true if your item isn't inside a QML Layout.
To fix your second code, use manual positioning.
http://doc.qt.io/qt-5/qtquick-usecase-layouts.html

i.e., replace:

Code: [Select]

delegate: Rectangle {
    Layout.fillWidth: true

with:

Code: [Select]

delegate: Rectangle {
    width: listView_Channels.width

or, even better:

Code: [Select]

delegate: Rectangle {
    width: ListView.view.width


[Bradford Smith]

Yes, thank you ntisitho. I've replaced any layout references with much simpler h/w // implicit h/w, and am handling layouts properly now