QML GridView items size update. How?

[bogong]

Hello all!
I have in QML GridView and I need to change size of items in it dynamically. How to do it?
For example I have GridView on mobile device and when I see portrait I want to have one size of items and when landscape another size of item. I am perfectly aware of detecting orientation change. The question is only about QML GridView. How to redraw it by force when I need it?

[sierdzio]

The question is only about QML GridView. How to redraw it by force when I need it?

The same way you react to size changes everywhere: by binding to some properties (width and height for each cell), or using anchors, or using layouts (there is GridLayout, by the way).

Maybe share the relevant part of your code here, it will be easier to help on a concrete example.

[bogong]

@sierdzio

ListModel {

	id: oModel;

	ListElement {name: "Jim Williams";}
	ListElement {name: "John Brown";}
	ListElement {name: "Bill Smyth";}
	ListElement {name: "Sam Wise";}
	ListElement {name: "Jim Williams";}
	ListElement {name: "John Brown";}
	ListElement {name: "Bill Smyth";}
	ListElement {name: "Sam Wise";}
}

GridView {

	property double pCellWidth: 0;
	property double pCellHeight: 0;

	signal sgItemSizeChanged();

	id: oGridView;
	anchors.fill: parent;
	model: oModel;
	cellHeight: oGridView.pCellHeight;
	cellWidth: oGridView.pCellWidth;

	delegate: Rectangle {

		id: oDelegate;
		width: oGridView.pCellWidth;
		height: oGridView.pCellHeight;

		Text {

			id: name;
			text: model.name;
			anchors.centerIn: parent;
		}

		Connections {
			target: oGridView;
			function onSgItemSizeChanged() {

				console.log("onSgItemSizeChanged");

				oDelegate.mResizeItem();
			}
		}

		function mResizeItem() {

			console.log("mResizeItem");

			oDelegate.width = oGridView.pCellWidth;
			oDelegate.height = oGridView.pCellHeight;
		}
	}

	onWidthChanged: {

		console.log("onWidthChanged");

		oGridView.mSetCellWidth();
		oGridView.sgItemSizeChanged();
	}

	Component.onCompleted: {

		console.log("Component.onCompleted");

		oGridView.mSetCellWidth();
		oGridView.sgItemSizeChanged();
	}

	function mSetCellWidth() {

		console.log("mSetCellWidth");

		if (oGridView.width > oGridView.height) {
			oGridView.pCellWidth = oGridView.width * 0.5;
		} else {
			oGridView.pCellWidth = oGridView.width;
		}
	}
}

For now it's working wrong:

• Ignoring first rotation
• Using portrait proportion for landscape and landscape for portrait.

[sierdzio]

Whoa, that's complicated. Here's how I'd suggest to simplify it:

GridView {
  id: oGridView
  anchors.fill: parent
  cellWidth: width > height? width * .5 : width

  delegate: Rectangle {
    width: oGridView.cellWidth
    height: oGridView.cellHeight

    Text {
      text: model.name
      anchors.centerIn: parent
    }
  }
}

[bogong]

@sierdzio Ha-ha-ha! Coffee first! That is what I've been seeking ... Thx. 2 hours of sleepy-coding :-))) Issue closed.

[bogong]

Example published here