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

make QML ListView to be look like GridView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 321 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