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. make QML ListView to be look like GridView
Qt 6.11 is out! See what's new in the release blog

make QML ListView to be look like GridView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 427 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.
  • C Offline
    C Offline
    CubeEd
    wrote on last edited by CubeEd
    #1

    I have code which position images like grid using GridView. I need the same the same look only using ListView. Why i need this? Because ListView have section what doesn't have GridView. I want add images to section. Key for section will be date of image.

    Here is how it looks now with GridViewScreenshot from 2020-03-15 22-03-58.png
    It should look the same with ListView but i don't know how to do this. Her my code.

    Page
     {
        id: page
        JsonListModel
        {
            id: jsonModel
            source: page.jsonData
            keyField: "id"
        }
        GridView
        {
            id: view
    
            anchors.topMargin: dp(5)
            anchors.fill: parent
            cellWidth:(parent.width/3)
            cellHeight: cellWidth
            model: jsonModel
            clip: true
            boundsBehavior: Flickable.OvershootBounds // for flicking
            snapMode: ListView.SnapToItem // to stop at begin of item
    
    
            delegate: Item
            {
                id: photo
    
                property var view: GridView.view
                property var isCurrent: GridView.isCurrentItem
    
                height: view.cellHeight
                width: view.cellWidth
    
                AppImage
                {
                    id: appImage
                    anchors
                    {
                        rightMargin:
                        {
                            (index+1)%3 === 0 ? 0 : 3
                        }
                        bottomMargin: dp(20)
                        fill: parent
                    }
                    source: model.img_url
                }
    
                Text
                {
                    anchors
                    {
                        horizontalCenter: parent.horizontalCenter
                        top: appImage.bottom
                        topMargin: dp(2)
                        bottomMargin: dp(3)
                    }
                    renderType: Text.NativeRendering
                    text: "%1%2".arg(model.text).arg(isCurrent ? " *" : "")
                    font.pointSize: sp(9)
                }
            }
        }
    }
    

    And how it should look
    90fb89f9-b61d-4328-92da-0df9fd42d3d1.jpeg

    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