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. Row of Text items in ListView
Forum Updated to NodeBB v4.3 + New Features

Row of Text items in ListView

Scheduled Pinned Locked Moved Solved QML and Qt Quick
18 Posts 4 Posters 3.3k 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.
  • IntruderExcluderI IntruderExcluder

    While Layouts are importing looks like 1.x this doesn't means that they are from Quick 1, it is because of weird versioning in QML. The one thing you should avoid is QuickControls 1.x since they are deprecated at least (and also ugly and slow).

    B Offline
    B Offline
    Bob64
    wrote on last edited by
    #9

    @IntruderExcluder Understood. Unfortunately I do have to use SplitView and TreeView from Controls 1 as there are no alternatives.

    GrecKoG 1 Reply Last reply
    0
    • B Bob64

      @IntruderExcluder Understood. Unfortunately I do have to use SplitView and TreeView from Controls 1 as there are no alternatives.

      GrecKoG Offline
      GrecKoG Offline
      GrecKo
      Qt Champions 2018
      wrote on last edited by
      #10

      @Bob64 There is a SplitView in Qt Quick Controls 2 since Qt 5.13

      B 1 Reply Last reply
      0
      • GrecKoG GrecKo

        @Bob64 There is a SplitView in Qt Quick Controls 2 since Qt 5.13

        B Offline
        B Offline
        Bob64
        wrote on last edited by Bob64
        #11

        @GrecKo unfortunately I am stuck on 5.9.6 for the time being. Also, judging by some of the questions in this forum, it looks like the new SplitView isn't quite ready for production use yet anyway.

        1 Reply Last reply
        0
        • B Offline
          B Offline
          Bob64
          wrote on last edited by
          #12

          I think I have tried out all of the possible ideas in this thread but they all fail in one way or another. Either they are not available to me in Qt 5.9.6, or the text stops wrapping, or the mouse area stops capturing the list item selection, or the list row heights become a uniform height rather than each one adjusting itself according to its text. This last behaviour is something that is essential for me to preserve. The best I have been able to come up with is a variation on my original code with two separate mouse areas. To avoid the small dead spot in the space between row items, I have set the spacing to 0 and instead added a leftMargin to the Text item.

          GrecKoG 1 Reply Last reply
          0
          • B Bob64

            I think I have tried out all of the possible ideas in this thread but they all fail in one way or another. Either they are not available to me in Qt 5.9.6, or the text stops wrapping, or the mouse area stops capturing the list item selection, or the list row heights become a uniform height rather than each one adjusting itself according to its text. This last behaviour is something that is essential for me to preserve. The best I have been able to come up with is a variation on my original code with two separate mouse areas. To avoid the small dead spot in the space between row items, I have set the spacing to 0 and instead added a leftMargin to the Text item.

            GrecKoG Offline
            GrecKoG Offline
            GrecKo
            Qt Champions 2018
            wrote on last edited by
            #13

            @Bob64 said in Row of Text items in ListView:

            I think I have tried out all of the possible ideas in this thread but they all fail in one way or another. Either they are not available to me in Qt 5.9.6, or the text stops wrapping, or the mouse area stops capturing the list item selection, or the list row heights become a uniform height rather than each one adjusting itself according to its text.

            IntruderExcluder's solution should work:

            import QtQuick 2.0
            import QtQuick.Window 2.0
            import QtQuick.Controls 2.0
            import QtQuick.Layouts 1.0
            
            Window {
                id: root
                visible: true
                width: 640
                height: 480
                title: qsTr("Hello World")
            
                ListModel {
                    id: messageModel
                    ListElement {
                        message: "sadasdasdad"
                        level: 1
                    }
                    ListElement {
                        message: "sadasdaasdasdasdasdasdad"
                        level: 2
                    }
                    ListElement {
                        message: "sadasdaasdasdqweqweqwesdad"
                        level: 3
                    }
                    ListElement {
                        message: "sadasdarwerwerwerwerwerwerwerwerwesdadsadasdarwerwerwerwerwerwerwerwerwesdad"
                        level: 4
                    }
                }
            
                ListView {
                    anchors.fill: parent
                    model: messageModel
            
                    delegate: ItemDelegate {
                        width: root.width
                        padding: 5
                        contentItem: RowLayout {
                            spacing: 5
                            Text {
                                text: model.level
                            }
                            Text {
                                text: model.message
                                Layout.fillWidth: true
                                wrapMode: Text.Wrap
                            }
                        }
                        onClicked: print(model.index)
                    }
                }
            }
            
            B 1 Reply Last reply
            1
            • GrecKoG GrecKo

              @Bob64 said in Row of Text items in ListView:

              I think I have tried out all of the possible ideas in this thread but they all fail in one way or another. Either they are not available to me in Qt 5.9.6, or the text stops wrapping, or the mouse area stops capturing the list item selection, or the list row heights become a uniform height rather than each one adjusting itself according to its text.

              IntruderExcluder's solution should work:

              import QtQuick 2.0
              import QtQuick.Window 2.0
              import QtQuick.Controls 2.0
              import QtQuick.Layouts 1.0
              
              Window {
                  id: root
                  visible: true
                  width: 640
                  height: 480
                  title: qsTr("Hello World")
              
                  ListModel {
                      id: messageModel
                      ListElement {
                          message: "sadasdasdad"
                          level: 1
                      }
                      ListElement {
                          message: "sadasdaasdasdasdasdasdad"
                          level: 2
                      }
                      ListElement {
                          message: "sadasdaasdasdqweqweqwesdad"
                          level: 3
                      }
                      ListElement {
                          message: "sadasdarwerwerwerwerwerwerwerwerwesdadsadasdarwerwerwerwerwerwerwerwerwesdad"
                          level: 4
                      }
                  }
              
                  ListView {
                      anchors.fill: parent
                      model: messageModel
              
                      delegate: ItemDelegate {
                          width: root.width
                          padding: 5
                          contentItem: RowLayout {
                              spacing: 5
                              Text {
                                  text: model.level
                              }
                              Text {
                                  text: model.message
                                  Layout.fillWidth: true
                                  wrapMode: Text.Wrap
                              }
                          }
                          onClicked: print(model.index)
                      }
                  }
              }
              
              B Offline
              B Offline
              Bob64
              wrote on last edited by
              #14

              @GrecKo Thank you. That is almost there. For longer text items, the rows will adjust their height as required. However the default height of each row makes the list too spaced out for brief text items (seems to default to 40 for me). This seems like it should be a simple tweak but I haven't been able to find it yet!

              1 Reply Last reply
              0
              • GrecKoG Offline
                GrecKoG Offline
                GrecKo
                Qt Champions 2018
                wrote on last edited by
                #15

                That's because the implicitHeight of the ItemDelegate is based on the max of the one from its background and its contentItem.

                You can ignore the background implicitHeight by adding: implicitHeight: implicitContentHeight + topPadding + bottomPadding

                B 1 Reply Last reply
                1
                • GrecKoG GrecKo

                  That's because the implicitHeight of the ItemDelegate is based on the max of the one from its background and its contentItem.

                  You can ignore the background implicitHeight by adding: implicitHeight: implicitContentHeight + topPadding + bottomPadding

                  B Offline
                  B Offline
                  Bob64
                  wrote on last edited by
                  #16

                  @GrecKo Thank you so much for your help but it seems implicitContentHeight is not available in my version of Qt.

                  IntruderExcluderI 1 Reply Last reply
                  0
                  • B Bob64

                    @GrecKo Thank you so much for your help but it seems implicitContentHeight is not available in my version of Qt.

                    IntruderExcluderI Offline
                    IntruderExcluderI Offline
                    IntruderExcluder
                    wrote on last edited by
                    #17

                    @Bob64 said in Row of Text items in ListView:

                    @GrecKo Thank you so much for your help but it seems implicitContentHeight is not available in my version of Qt.

                    Use implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding then.

                    B 1 Reply Last reply
                    1
                    • IntruderExcluderI IntruderExcluder

                      @Bob64 said in Row of Text items in ListView:

                      @GrecKo Thank you so much for your help but it seems implicitContentHeight is not available in my version of Qt.

                      Use implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding then.

                      B Offline
                      B Offline
                      Bob64
                      wrote on last edited by
                      #18

                      @IntruderExcluder Thank you! I thought I had tried that one but obviously not. Anyway, it works well. Thank you for this and for your original suggestion.

                      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