QT quick2 qml dynamic change GridView columns

c++, qml, qtquick2

Solution

I've solved the problem by defining onWidthChanged of the gridview.

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    id: appwnd
    property int columns : 3;

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("2 columns")
                onTriggered: {
                    columns = 2;
                    grid.cellWidth = grid.width/columns;
                }
            }
            MenuItem {
                text: qsTr("3 columns")
                onTriggered: {
                    columns = 3;
                    grid.cellWidth = grid.width/columns;
                }
            }
        }
    }

    GridView {
        id: grid
        anchors.fill: parent
        cellWidth: width / 3;
        cellHeight: 300;
        model: ListModel {
            ListElement {
                name: "Apple"
                cost: 2.45
            }
            ListElement {
                name: "Orange"
                cost: 3.25
            }
            ListElement {
                name: "Banana"
                cost: 1.95
            }
        }
        delegate : Rectangle {
            //anchors.fill: parent
            width: grid.cellWidth
            height: grid.cellHeight
            border.color: "green"
            border.width: 2
            color: "red"
        }
        onWidthChanged: {
            grid.cellWidth = grid.width/appwnd.columns;
        }
    }
}

Problem

I used a GridView to display a ListModel. Originally I set cellWidth to: `cellWidth = grid.width/3` to create a 3 columns grid. then I want to change the column count to 2, so I set cellWidth to: ``` cellWidth = grid.width/2 ``` the GridView's display changed. But when I resize the container's desktop window, the cells in the gridview won't change size anymore. what should I do to make it correct? Please have a look at the following code: ``` import QtQuick 2.1 import QtQuick.Controls 1.0 import QtQuick.Window 2.0 ApplicationWindow { title: qsTr("Hello World") width: 640 height: 480 menuBar: MenuBar { Menu { title: qsTr("File") MenuItem { text: qsTr("2 columns") onTriggered: grid.cellWidth = grid.width/2; } MenuItem { text: qsTr("3 columns") onTriggered: grid.cellWidth = grid.width/3; } } } GridView { id: grid anchors.fill: parent cellWidth: width / 3; cellHeight: 300; model: ListModel { ListElement { name: "Apple" cost: 2.45 } ListElement { name: "Orange" cost: 3.25 } ListElement { name: "Banana" cost: 1.95 } } delegate : Rectangle { //anchors.fill: parent width: grid.cellWidth height: grid.cellHeight border.color: "green" border.width: 2 color: "red" } } } ```

Original source