How can I make a QML ListView Width the width of it's delegate?

Question

I've created a ListView that the user can scroll through. I noticed that the scrollbar does not appear nor does scrolling work.

I tracked down the issue to the fact that I assign the ListView width as contentWidth. If I set it to 100 for example, the scrollbar appears and I am able to scroll. However, I wanted the ListView width to be decided by it's content (thus why I used contentWidth). Am I doing this wrong, all the other topics I find regarding the matter say that contentWidth should work...

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.15
    
Window {
    id: root
    width: 1200
    height: 800
    visible: true
    title: qsTr("Server Manager")
    color: "black"

    ListView {
        spacing: 10
        height: 100
        width: contentWidth

        ScrollBar.vertical: ScrollBar {
            active: true
        }

        model: ["test", "6", "123", "22", "55"]

        delegate: Row {
            width: contentWidth
            TextField {
                width: 150
                height: 80
                text: "Sample"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample2"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample3"
            }
        }

    }
}

Answer 1

A few comments:

• On a ListView (which is a sub type of Flickable), you have to manually set contentWidth. By default it is -1 which means it hasn't been set. (Though it appears in this case contentWidth will use width if not set.)

• With this kind of layout and the height you specified, you need to turn clipping on for the ListView. It's usually off because they are often used in full window layouts. You need it on here to have it actually look 100 high.

• Each Row will have it's own implicit width based on the three TextField children. Setting width on it will only interfere with that.

• If you want the ListView to match it's contents width, then you have to reach into it's contentItem (where the delegate rows are actually attached) and then you can use the width off of its childrenRect.

Updated code:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.15

Window {
    id: root
    width: 1200
    height: 800
    visible: true
    title: qsTr("Server Manager")
    color: "black"

    ListView {
        spacing: 10
        height: 100
        width: contentItem.childrenRect.width
        clip: true

        ScrollBar.vertical: ScrollBar {
            active: true
        }

        model: ["test", "6", "123", "22", "55"]

        delegate: Row {
            TextField {
                width: 150
                height: 80
                text: "Sample"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample2"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample3"
            }
        }

    }
}