Vertical Center on ListView (Delegate) not working

[QTmox]

Hey guys! I'm currently working on an exercise that revolves around ListViews, delegates and so on.

This is what my application currently looks like:

komListCenter.jpg


All I want is to center the second column of text just like the first column. However, I only manage to get it to the top or the bottom of the row - never in the center.

Can any of you point out my mistake why I managed to but the first column of text nicely into the row's center but can't get it to work on the second one? Thanks in advance!


This is my source code:


main.qml

import QtQuick 2.3
import QtQuick.Controls 1.2
 
ApplicationWindow {
    id: root
 
    width: 800; height: 600   
 
    function readFile() {
        var request = new XMLHttpRequest()
 
        request.open('GET', 'qrc:/Kommilitonen.txt')
        request.onreadystatechange = function(event) {
 
 
            if(request.readyState == XMLHttpRequest.DONE)
            {
                console.log(request.responseText)
                view.model = JSON.parse(request.responseText)
            }
        }
 
        request.send();
    }
 
    ListView {
        id: view
 
        property real delegateOpacity: 0.5
 
        anchors {fill: parent; margins: 2}
 
        delegate: KommiDelegate {}
 
        spacing: 4
        cacheBuffer: 50
    }
 
    Component.onCompleted: {
        root.visible = true
        readFile();
    }
 
}

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    id: root

    width: 800; height: 600   
    
    function readFile() {
        var request = new XMLHttpRequest()

        request.open('GET', 'qrc:/Kommilitonen.txt')
        request.onreadystatechange = function(event) {


            if(request.readyState == XMLHttpRequest.DONE)
            {
                console.log(request.responseText)
                view.model = JSON.parse(request.responseText)
            }
        }

        request.send();
    }

    ListView {
        id: view

        property real delegateOpacity: 0.5

        anchors {fill: parent; margins: 2}

        delegate: KommiDelegate {}

        spacing: 4
        cacheBuffer: 50
    }

    Component.onCompleted: {
        root.visible = true
        readFile();
    }

}

To copy to clipboard, switch view to plain text mode 

KommiDelegate.qml

import QtQuick 2.3
 
Rectangle {
    id: delegate01
    anchors{left: parent.left; right: parent.right}
    height: 100
    border.width: 2
    border.color: "lightsteelblue"
    radius: 10
    clip: true
    opacity: 0.5
    scale: 0.9
 
    NumberAnimation{
        id: animateOpacity
        target: delegate01
        properties: "opacity"
        from: 0.9
        to: 1.0
        easing {type: Easing.OutBack; overshoot: 500}
    }
 
 
 
    MouseArea {
        anchors.fill: parent
        onPressed: {
            if(parent.opacity == 0.5)
                parent.opacity = 1.0
            else
                parent.opacity = 0.5
            if(parent.scale==0.9)
                parent.scale = 1.0
            else
                parent.scale = 0.9
 
        }
    }
 
        Image {
            id: img
            anchors.left: parent.left
            anchors.leftMargin: 20
            source: modelData.image
            smooth: true
            opacity: 0.3
            Behavior on opacity {NumberAnimation{easing.type:Easing.OutQuad}}
 
        }
 
        Column {
            id: column
            height: 50
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: img.right
            anchors.leftMargin: 20
            Text{text: 'First Name: ' + modelData.forename}
            Text{text: 'Name: ' + modelData.name}
            Text{text: 'University Course: ' + modelData.course}
            Text{text: 'Age: ' + modelData.age}
 
 
        }
 
 
 
 
 
    ListView
    {
        anchors.left: column.right
        anchors.leftMargin: 20
        anchors.verticalCenter: parent.verticalCenter
 
        id: viewClass
 
        delegate: ClassDelegate {}
 
        spacing: 4
        cacheBuffer: 50
 
        model: modelData.modules
    }
 
 
 
}

import QtQuick 2.3

Rectangle {
    id: delegate01
    anchors{left: parent.left; right: parent.right}
    height: 100
    border.width: 2
    border.color: "lightsteelblue"
    radius: 10
    clip: true
    opacity: 0.5
    scale: 0.9

    NumberAnimation{
        id: animateOpacity
        target: delegate01
        properties: "opacity"
        from: 0.9
        to: 1.0
        easing {type: Easing.OutBack; overshoot: 500}
    }



    MouseArea {
        anchors.fill: parent
        onPressed: {
            if(parent.opacity == 0.5)
                parent.opacity = 1.0
            else
                parent.opacity = 0.5
            if(parent.scale==0.9)
                parent.scale = 1.0
            else
                parent.scale = 0.9

        }
    }

        Image {
            id: img
            anchors.left: parent.left
            anchors.leftMargin: 20
            source: modelData.image
            smooth: true
            opacity: 0.3
            Behavior on opacity {NumberAnimation{easing.type:Easing.OutQuad}}

        }

        Column {
            id: column
            height: 50
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: img.right
            anchors.leftMargin: 20
            Text{text: 'First Name: ' + modelData.forename}
            Text{text: 'Name: ' + modelData.name}
            Text{text: 'University Course: ' + modelData.course}
            Text{text: 'Age: ' + modelData.age}


        }





    ListView
    {
        anchors.left: column.right
        anchors.leftMargin: 20
        anchors.verticalCenter: parent.verticalCenter

        id: viewClass

        delegate: ClassDelegate {}

        spacing: 4
        cacheBuffer: 50

        model: modelData.modules
    }



}

To copy to clipboard, switch view to plain text mode 

ClassDelegate.qml

import QtQuick 2.0
 
 
    Rectangle {
        id: classDelegate
        anchors{left: parent.left; right: parent.right}
        visible: true
 
            Column {
 
                id: column2
                Text{text: 'Description: ' + modelData.name}
                Text{text: 'ID: ' + modelData.identificationCode}
                Text{text: 'Severity: ' + modelData.severity}
                Text{text: 'Group: ' + modelData.lernenGroup}
            }
}

import QtQuick 2.0


    Rectangle {
        id: classDelegate
        anchors{left: parent.left; right: parent.right}
        visible: true

            Column {

                id: column2
                Text{text: 'Description: ' + modelData.name}
                Text{text: 'ID: ' + modelData.identificationCode}
                Text{text: 'Severity: ' + modelData.severity}
                Text{text: 'Group: ' + modelData.lernenGroup}
            }
}

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

Your "viewClass" ListView has no height.
If you want it to be as high has "column" bind to that element's height property.

Cheers,
_

[QTmox]

Your "viewClass" ListView has no height.
If you want it to be as high has "column" bind to that element's height property.

Cheers,
_

Thanks for your reply! I tried it, but unfortunately the column is still sticking to the top of the rectangle.

ListView
    {
 
 
        id: viewClass
        height: delegate01.height
 
        anchors.left: column.right
        anchors.leftMargin: 20
        anchors.verticalCenter: parent.verticalCenter
 
        delegate: ClassDelegate {}
 
        spacing: 4
        cacheBuffer: 50
 
 
        model: modelData.modules
    }

ListView
    {


        id: viewClass
        height: delegate01.height

        anchors.left: column.right
        anchors.leftMargin: 20
        anchors.verticalCenter: parent.verticalCenter

        delegate: ClassDelegate {}

        spacing: 4
        cacheBuffer: 50


        model: modelData.modules
    }

To copy to clipboard, switch view to plain text mode 

import QtQuick 2.0
 
 
    Rectangle {
        anchors.verticalCenter: parent.verticalCenter
        id: classDelegate
        anchors{left: parent.left; right: parent.right}
        visible: true
 
            Column {
 
                id: column2
                Text{text: 'Description: ' + modelData.name}
                Text{text: 'ID: ' + modelData.identificationCode}
                Text{text: 'Severity: ' + modelData.severity}
                Text{text: 'Group: ' + modelData.lernenGroup}
            }
}

import QtQuick 2.0


    Rectangle {
        anchors.verticalCenter: parent.verticalCenter
        id: classDelegate
        anchors{left: parent.left; right: parent.right}
        visible: true

            Column {

                id: column2
                Text{text: 'Description: ' + modelData.name}
                Text{text: 'ID: ' + modelData.identificationCode}
                Text{text: 'Severity: ' + modelData.severity}
                Text{text: 'Group: ' + modelData.lernenGroup}
            }
}

To copy to clipboard, switch view to plain text mode 

EDIT: I'm also facing the problem that only the first few lines from my second model are showing. Is there a way to fit all these information located under "modules" into the row/column using a scrolling bar?



.txt file (model)

[
	{
        "forename": "Hans",
        "name": "Mayer",
        "course": "TIB",
        "age": 22,
		"matriculationNumber": 942538,
            "image": "images/mann.jpg",
		"semseter": 3,
		"modules": [ 	
			{
			"name": "Mathematik 3",
			"identificationCode": "MA3",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Signale und Systeme",
			"identificationCode": "SS",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Elektronische Schaltungen",
			"identificationCode": "ES",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Digital- und Mikrocomputertechnik",
			"identificationCode": "DMC",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Softwareentwicklungsmethoden und Tools",
			"identificationCode": "SET",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Bildgebende Verfahren in der Medizin",
			"identificationCode": "SET",
			"severity": "easy",
			"lernenGroup": "no"			
			}			
			]
	},{
        "forename": "Verena",
        "name": "Kaiser",
        "course": "MTB",
        "age": 24,
		"matriculationNumber": 942538,
        "image": "images/frau.png",
		"semseter": 3,
		"modules": [ 	
			{
			"name": "Mathematik 3",
			"identificationCode": "MA3",
			"severity": "easy",
			"lernenGroup": "yes"			
			},{
			"name": "Signale und Systeme",
			"identificationCode": "SS",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Elektronische Schaltungen",
			"identificationCode": "ES",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Digital- und Mikrocomputertechnik",
			"identificationCode": "DMC",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Softwareentwicklungsmethoden und Tools",
			"identificationCode": "SET",
			"severity": "difficult",
			"lernenGroup": "no"			
			},{
			"name": "Bildgebende Verfahren in der Medizin",
			"identificationCode": "SET",
			"severity": "easy",
			"lernenGroup": "no"			
			}			
			]
	}
]

[
	{
        "forename": "Hans",
        "name": "Mayer",
        "course": "TIB",
        "age": 22,
		"matriculationNumber": 942538,
            "image": "images/mann.jpg",
		"semseter": 3,
		"modules": [ 	
			{
			"name": "Mathematik 3",
			"identificationCode": "MA3",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Signale und Systeme",
			"identificationCode": "SS",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Elektronische Schaltungen",
			"identificationCode": "ES",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Digital- und Mikrocomputertechnik",
			"identificationCode": "DMC",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Softwareentwicklungsmethoden und Tools",
			"identificationCode": "SET",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Bildgebende Verfahren in der Medizin",
			"identificationCode": "SET",
			"severity": "easy",
			"lernenGroup": "no"			
			}			
			]
	},{
        "forename": "Verena",
        "name": "Kaiser",
        "course": "MTB",
        "age": 24,
		"matriculationNumber": 942538,
        "image": "images/frau.png",
		"semseter": 3,
		"modules": [ 	
			{
			"name": "Mathematik 3",
			"identificationCode": "MA3",
			"severity": "easy",
			"lernenGroup": "yes"			
			},{
			"name": "Signale und Systeme",
			"identificationCode": "SS",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Elektronische Schaltungen",
			"identificationCode": "ES",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Digital- und Mikrocomputertechnik",
			"identificationCode": "DMC",
			"severity": "easy",
			"lernenGroup": "no"			
			},{
			"name": "Softwareentwicklungsmethoden und Tools",
			"identificationCode": "SET",
			"severity": "difficult",
			"lernenGroup": "no"			
			},{
			"name": "Bildgebende Verfahren in der Medizin",
			"identificationCode": "SET",
			"severity": "easy",
			"lernenGroup": "no"			
			}			
			]
	}
]

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

Thanks for your reply! I tried it, but unfortunately the column is still sticking to the top of the rectangle.

What do you mean with "still"?
Your screenshot had it at the bottom of the parent delegate.
What you might be seeing though is delegates being drawn outside the listview. You can turn the listview's clipping on if you don't want that.

ListView
    {
 
 
        id: viewClass
        height: delegate01.height

ListView
    {


        id: viewClass
        height: delegate01.height

To copy to clipboard, switch view to plain text mode 

Ah, I interpreted your first posting as wanting to have the two columns equally high.
Having it as high as the parent is probably better done with anchoring bottom and top to the parent's anchors.

Rectangle {
        anchors.verticalCenter: parent.verticalCenter

Rectangle {
        anchors.verticalCenter: parent.verticalCenter

To copy to clipboard, switch view to plain text mode 

That doesn't make sense in a delegate of a vertical listview.

EDIT: I'm also facing the problem that only the first few lines from my second model are showing. Is there a way to fit all these information located under "modules" into the row/column using a scrolling bar?

The list view allows scrolling already, it just doesn't have a scrollbar by default.

Cheers,
_