Qt World Summit: Submit your Presentation

QML ListView with Variable Height Delegate

  • Hi there,

    I tried all day but kept failing miserably to design a variable item height delegate for QML based ListView.
    I want to make a Facebook Newsfeed like item delegate which has its height based on its content.

    I started with column layout but failed.

    Please advise how should i approach this.


  • Here is the delegate diagram in my mind, as you can see item has to be variable height size so if title text take 2 or 3 or more lines it increases height automatically.

    So looking at this, please advise how should i proceed with layout, thanks

    0_1516748520969_Screen Shot 2018-01-24 at 4.00.54 AM.png

  • Qt Champions 2018

    Show your code.

    It's pretty straightforward to do it with a ColumnLayout or Column as the root of your delegate.

  • Thanks for the help :)
    So i'm currently using following code and when i go to Design View its still not word wraping and resizing height.

    import QtQuick 2.0
    import QtQuick.Layouts 1.3
        id: delegate
        width: 400
        spacing: 8
        Text {
            id: descriptionText
            text: qsTr("Qt 5.7 is an application development framework that provides a great user experience and develops full-capability applications with Qt Widgets, QML, and even Qt 3D.
    This book will address challenges in successfully developing cross-platform applications with the Qt framework. Cross-platform development needs a well-organized project. Using this book, you will have a better understanding of the Qt framework and the tools to resolve serious issues such as linking, debugging, and multithreading. Your journey will start with the new Qt 5 features. Then you will explore different platforms and learn to tame them. Every chapter along the way is a logical step that you must take to master Qt. The journey will end in an application that has been tested and is ready to be shipped.")
            width: parent.width
            wrapMode: Text.WordWrap
            font.pixelSize: 14
            textFormat: Text.StyledText
            horizontalAlignment: Qt.AlignLeft

Log in to reply