Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML ListView with Variable Height Delegate
Forum Update on Monday, May 27th 2025

QML ListView with Variable Height Delegate

Scheduled Pinned Locked Moved Solved QML and Qt Quick
4 Posts 2 Posters 1.6k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    scotryder
    wrote on 23 Jan 2018, 22:40 last edited by
    #1

    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.

    Thanks

    1 Reply Last reply
    0
    • S Offline
      S Offline
      scotryder
      wrote on 23 Jan 2018, 23:03 last edited by
      #2

      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

      1 Reply Last reply
      0
      • G Offline
        G Offline
        GrecKo
        Qt Champions 2018
        wrote on 23 Jan 2018, 23:44 last edited by
        #3

        Show your code.

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

        1 Reply Last reply
        0
        • S Offline
          S Offline
          scotryder
          wrote on 24 Jan 2018, 00:14 last edited by
          #4

          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
          
          ColumnLayout{
          
              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
              }
          
          }
          
          
          1 Reply Last reply
          0

          1/4

          23 Jan 2018, 22:40

          • Login

          • Login or register to search.
          1 out of 4
          • First post
            1/4
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved