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 Updated to NodeBB v4.3 + New Features

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 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 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
      • GrecKoG Online
        GrecKoG Online
        GrecKo
        Qt Champions 2018
        wrote on 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 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

          • Login

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