[Solved] Positioning ListView within Grid

[Aros]

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
        }

    }

}

[p3c0]

Hi @Aros,

IMO the problem is with the listview delegate. You have hard-coded the width property. Instead assign it width of its parent i.e width: parent.width and keep anchors.fill: parent for ListView.

[Aros]

@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.width

in 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]

@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 ListView

ListView {
    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]

@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]

@Aros Now you just have to center the Text items. Just add centerIn to Column

Column{
    anchors.centerIn: parent
    Text { text: '<b>Name:</b> ' + name  }
    Text { text: '<b>Number:</b> ' + number }
}

[Aros]

@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]

@Aros vertically meaning ?

[Aros]

@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]

@Aros Well add a margin to ListView

anchors.topMargin: 50

[Aros]

@p3c0 Oh yes, sorry. Completely forgot about that one. Thanks, now it's what I wanted.

[p3c0]

@Aros Glad that it worked. Please mark the post as solved if done.

[Aros]

@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...

[p3c0]

@Aros Edit the post title and prepend [Solved].