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. GridView cell height dynamic based on internal ListView
Forum Updated to NodeBB v4.3 + New Features

GridView cell height dynamic based on internal ListView

Scheduled Pinned Locked Moved QML and Qt Quick
1 Posts 1 Posters 2.8k Views 1 Watching
  • 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.
  • A Offline
    A Offline
    AmanVirdi
    wrote on last edited by
    #1

    Hi,
    I want to display a view using QML GridView, which contains ListView. My QML is:

    @Rectangle {
    property variant items

    Component {
        id: trackRowDelegate
        Item {
            id: item
            width: tacksDetail.width
            height: row.height
    
            Row {
                id: row
                width: parent.width
                spacing: 5
    
                Text {
                    text: model.modelData.trackno
                    width: parent.width * (20/100);
                    font.family: fontFamilyNormal
                    verticalAlignment: Text.AlignVCenter
                    visible: !(isPodcastView)
                    smooth:true
                    clip: true
                }
    
                Text {
                    width: parent.width * (60/100)
                    text: model.modelData.tracktitle
                    font.family: fontFamilyNormal
                    verticalAlignment: Text.AlignVCenter
                    smooth:true
                    clip: true
                }
    
                Text {
                    width: parent.width * (20/100)
                    text: model.modelData.duration
                    font.family: fontFamilyNormal
                    verticalAlignment: Text.AlignVCenter
                    smooth:true
                    clip: true
                }
    
                }
            }
        }
    }
    
    Component {
        id: trackDelegate
    
        Item {
            id: parentItem
            width: grid.cellWidth - 50
            height: tacksDetail.height
            anchors.left: parent.left
    
            Item {
                id: albumsDetail
                width: 150
                height: tacksDetail.height
                anchors.left: parent.left
    
                Image {
                    id: artwork
                    height: 100
                    width: 100
                    source: coverart
                    smooth: true
                    z: 9
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.top
                    anchors.topMargin: 8
                }
    
                Text {
                    id: txtAlbumName
                    text: albumname
                    width: 100
                    height: 12
                    font.pixelSize: 12
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: artworkShadow.bottom
                    anchors.topMargin: 3
                    verticalAlignment: Text.AlignVCenter
                    font.family: fontFamilyNormal
                    smooth:true
                    clip: true
                }
            }
    
            Item {
                id: tacksDetail
                width: parent.width - albumsDetail.width - 100
                height: lstTracksDetail.height
                anchors.left: albumsDetail.right
                anchors.leftMargin: 100
    
                ListView {
                    id: lstTracksDetail
                    model: tracklist
                    height: tracklist.length * 20
                    anchors.fill: parent
                    delegate: trackRowDelegate
                }
            }
        }
    }
    
    GridView {
        id: grid
        clip: true
        anchors.rightMargin: 5
        anchors.leftMargin: 5
        anchors.bottomMargin: 5
        anchors.topMargin: 5
        anchors.fill: parent
        cellWidth: parent.width
        cellHeight: parentItem.height
        model: items
        snapMode: GridView.SnapToRow!C:\Users\Aman\Desktop\Capture.PNG(Image)!
        delegate: trackDelegate
        focus: true
    }
    

    }@

    The "trackDelegate" is used to make an album section. I am trying to set the height of each Album section(parentItem, i.e. containing album image and tracks of that album) equal to the height of ListView(lstTracksDetail).

    Please help me to get out of this issue.

    1 Reply Last reply
    1

    • Login

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