[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
            }
    
        }
    
    }

  • Moderators

    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.



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


  • Moderators

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



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


  • Moderators

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


  • @p3c0 Thank's a lot, that what I wanted. And just one last question: What if I were to center it vertically as well?


  • Moderators

    @Aros vertically meaning ?



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


  • Moderators

    @Aros Well add a margin to ListView

    anchors.topMargin: 50
    


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


  • Moderators

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



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


  • Moderators

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.