CODEWITHSUNDEEP
gridviewqmlqtquick2
no_ideaw
no_ideaw

Reputation: 171

Why GridView item don't wrap?

I'm using a GridView in my qml code but it shows all the item in only one row but I don't want it. You can see in picture below: click to see picture and this is my code:

import QtQuick 2.8
import QtQuick.Controls 2.1
import Qt.labs.folderlistmodel 2.1

ApplicationWindow{
    id: a
    width: 480
    height: 640
    FolderListModel{
        id : listModel
        folder: "/home/muhammad/Pictures"
        nameFilters: ["*.jpg"]
    }
    Component{
        id: dd
        Image {
            id: m
            width: a.width/3
            height: width
            source: filePath
        }
    }

    GridView{
        verticalLayoutDirection: GridView.TopToBottom
        layoutDirection: Qt.LeftToRight
        anchors.fill: parent
        flow: GridView.FlowLeftToRight
        model: listModel
        delegate: dd
    }

}

how can I solve it?

Upvotes: 0

Views: 420

Answers (1)

jpnurmi
jpnurmi

Reputation: 5836

The size of each cell in a GridView is determined by cellWidth and cellHeight. The default cell size is 100x100. Notice that the cell size determines the layout of the view. Delegates can decide how to cover the area that is reserved for each cell. You may want to resize the Image-delegate to cellWidth and cellHeight, and set its fillMode to Image.PreserveAspectFit, for example.

GridView {
    id: gridView

    cellWidth: 200
    cellHeight: 200

    delegate: Image {
        width: gridView.cellWidth
        height: gridView.cellHeight
        fillMode: Image.PreserveAspectFit
    }
}

Upvotes: 1

Related Questions