QT quick2 qml динамическое изменение столбцов GridView

Question

QT quick2 qml динамическое изменение столбцов GridView

Я использовал GridView для отображения ListModel. Первоначально я установил cellWidth на:

cellWidth = grid.width/3

создать сетку из 3 столбцов. затем я хочу изменить количество столбцов на 2, поэтому я устанавливаю cellWidth на:

cellWidth = grid.width/2

дисплей 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"}
}
}

4

c++qml qtquick2

Решение

Другие решения

Проблема, с которой вы столкнулись, заключается в том, что привязки не устанавливаются автоматически при написании 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 для деталей о том, как это работает.

0

Источник

Accepted Answer

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

8