QT quick2 qml动态更改GridView列

Question

我使用GridView来显示ListModel。 最初我将cellWidth设置为：

cellWidth = grid.width/3

创建一个3列网格。 然后我想将列数更改为2，所以我将cellWidth设置为：

cellWidth = grid.width/2

GridView的显示改变了。 但是，当我调整容器的桌面窗口大小时，gridview中的单元格将不再更改大小。

我该怎么做才能使它正确？

请看下面的代码：

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"
    }
}
}

Answer 1

我通过定义gridview的onWidthChanged解决了这个问题。

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;
        }
    }
}

Answer 2

您遇到的问题是，当您编写JavaScript（您在onTriggered信号处理程序中执行此操作）时，不会自动设置绑定。

使用Qt.binding()可以在Javascript中进行绑定（而不是纯QML属性绑定Qt.binding() ：

onTriggered: {
    columns = 2;
    grid.cellWidth = Qt.binding(function() { return grid.width/columns; });
}

虽然您的onWidthChanged处理程序解决方案有效，但这是一个更清洁的解决方案。

请参阅： http ： //doc.qt.io/qt-5/qtqml-syntax-propertybinding.html#creating-property-bindings-from-javascript ，了解其工作原理的详细信息。