Qt с QML в quick2 динамических столбцов изменение GridView в

Question

Qt с QML в quick2 динамических столбцов изменение GridView в

Я использовал 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"

    }

}

}

900 2

c++qml qtquick2

2 ответов:

Comments

Ничего не найдено.

Brent81 · Accepted Answer · 2013-08-12 15:48:22

Я решил эту проблему, определив onWidthChanged из 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;
        }
    }
}

Keithel · Accepted Answer · 2017-01-25 19:40:15

Проблема, с которой вы столкнулись, заключается в том, что привязки не настраиваются автоматически при написании JavaScript (что вы делаете в своих обработчиках сигналов onTriggered).

Можно делать привязки в 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 Подробнее о том, как это работает.