[Solved] Positioning ListView within Grid
-
I have the following problem.
I need to have 3x3 grid that spans the whole app window. Within each cell there should be ListView, that let's me select something. I try to use highlighting option to highlight the currently selected item in each cell. The problem is that the ListView always shows in the top-left corner of it's cell and I just cannot seem to figure out, what to do. The usual stuff like anchors.centerIn : parent, anchors.verticalCenter: parent.verticalCenter, anchors.fill: parent and so on does not work at all if put withing ListView. I have also tried to put the centering logic within the delegate, but that messes up the items within list layout. Plus it does not move the highlight, which stays in the top-left of the main window. There is a demonstration code, I don't know what to change to make it work and spent 2 days trying to figure out... While it should be trivial.
import QtQuick 2.2 import QtQuick.Window 2.1 import QtQuick.Layouts 1.1 Window { objectName: "menuWindow" visible: true id: menuPage width: 1600 height: 900 color: "red" ListModel { id: modelInstance ListElement { name: "Item1" number: "1" } ListElement { name: "Item2" number: "2" } ListElement { name: "Item3" number: "3" } } Component { id: delegateInstance Item{ //anchors.horizontalCenter : parent.horizontalCenter //anchors.verticalCenter: parent.verticalCenter //anchors.centerIn: parent width: 100; height: 40 Column{ Text { text: '<b>Name:</b> ' + name } Text { text: '<b>Number:</b> ' + number } } } } GridLayout{ id : menuGrid anchors.fill: parent columns: 3 rows: 3 flow: GridLayout.LeftToRight //spacing: 50 Rectangle{ Layout.fillHeight: true Layout.fillWidth: true ListView { anchors.fill: parent //anchors.centerIn: parent //anchors.horizontalCenter: parent.horizontalCenter //anchors.verticalCenter: parent.verticalCenter model: modelInstance delegate: delegateInstance highlight: Rectangle {color: "lightsteelblue"; radius: 5} focus: true } } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true ListView { Layout.fillWidth : true //width: 180; height: 200 anchors.fill: parent model: modelInstance delegate: delegateInstance highlight: Rectangle {color: "green"; radius: 5} focus: true } } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true ListView { anchors.fill: parent model: modelInstance delegate: delegateInstance highlight: Rectangle {color: "blue"; radius: 5} focus: true } } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true } } } -
Hi @Aros,
IMO the problem is with the listview delegate. You have hard-coded the
widthproperty. Instead assign itwidthof its parent i.ewidth: parent.widthand keepanchors.fill: parentforListView.@p3c0 But the parent of the delegate is the whole window itself. I think the parent should be the field of the GridLayout. But I don't know how to do that anyway as I don't know how to address it. If I just put
width: parent.widthin the delegate, it does not work. It renderes all the list items at the same place (top left of the grid cell) - meaning they are overlayed.
-
@p3c0 But the parent of the delegate is the whole window itself. I think the parent should be the field of the GridLayout. But I don't know how to do that anyway as I don't know how to address it. If I just put
width: parent.widthin the delegate, it does not work. It renderes all the list items at the same place (top left of the grid cell) - meaning they are overlayed.
@Aros No. They are not overlayed.
Component { id: delegateInstance Item{ width: parent.width; height: 40 Column{ Text { text: '<b>Name:</b> ' + name } Text { text: '<b>Number:</b> ' + number } } } }and one of the
ListViewListView { anchors.fill: parent model: modelInstance delegate: delegateInstance highlight: Rectangle {color: "lightsteelblue"; radius: 5} focus: true }Can you post a screenshot with the above changes ?
-
@Aros No. They are not overlayed.
Component { id: delegateInstance Item{ width: parent.width; height: 40 Column{ Text { text: '<b>Name:</b> ' + name } Text { text: '<b>Number:</b> ' + number } } } }and one of the
ListViewListView { anchors.fill: parent model: modelInstance delegate: delegateInstance highlight: Rectangle {color: "lightsteelblue"; radius: 5} focus: true }Can you post a screenshot with the above changes ?
@p3c0 Well, at first it did not show any list at all and after few seconds the ListView background color rectangle appeared (for some reason it was even animated transition). I have tried to launch it several times (out of sheer desperation) and for the third time (what the hell?!) it showed the list and from that time on, it show the list. My QT installation seems to be having some troubles as I had run qmake and rebuilt the solution before as I always do but it didn't help. What did help was to launch it 3 times in a row... ?!
Anyway the list is still top left and not centered with the grid cell.
https://onedrive.live.com/redir?resid=23FE630A02A6BB8!27371&authkey=!AODgc4UQ2oRe2Ko&v=3&ithint=photo%2Cpng -
@p3c0 Well, at first it did not show any list at all and after few seconds the ListView background color rectangle appeared (for some reason it was even animated transition). I have tried to launch it several times (out of sheer desperation) and for the third time (what the hell?!) it showed the list and from that time on, it show the list. My QT installation seems to be having some troubles as I had run qmake and rebuilt the solution before as I always do but it didn't help. What did help was to launch it 3 times in a row... ?!
Anyway the list is still top left and not centered with the grid cell.
https://onedrive.live.com/redir?resid=23FE630A02A6BB8!27371&authkey=!AODgc4UQ2oRe2Ko&v=3&ithint=photo%2Cpng -
@Aros Now you just have to center the
Textitems. Just addcenterIntoColumnColumn{ anchors.centerIn: parent Text { text: '<b>Name:</b> ' + name } Text { text: '<b>Number:</b> ' + number } } -
@p3c0 Thank's a lot, that what I wanted. And just one last question: What if I were to center it vertically as well?
-
@p3c0 Well so far it renderes the lists within the grid cell horizontally centered (within the cell), but they are placed directly under the top of the cell which doesn't look good. I need to move the whole list little bit down (not necessarily center it). The thing is that since there is the "anchors.fill: parent" I cannot write something like "y: 50" to shift it down.
-
@p3c0 Well so far it renderes the lists within the grid cell horizontally centered (within the cell), but they are placed directly under the top of the cell which doesn't look good. I need to move the whole list little bit down (not necessarily center it). The thing is that since there is the "anchors.fill: parent" I cannot write something like "y: 50" to shift it down.
-
@p3c0 Sorry but I don't know how to do that. There's no button for that. I tried to google it out, but I only found forum posts that complain they do not know how to do that...
