Vertical Center on ListView (Delegate) not working

Printable View

1 Attachment(s)

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:

Attachment 11434

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

Code:

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();
    }
 
}

KommiDelegate.qml

Code:

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

ClassDelegate.qml

Code:

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

15th October 2015, 12:42
anda_skoa

Re: Vertical Center on ListView (Delegate) not working

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

Cheers,
_

Re: Vertical Center on ListView (Delegate) not working

Quote:

Originally Posted by 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,
_

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

Code:

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
    }

Code:

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

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)

Code:

[
	{
        "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"			
			}			
			]
	}
]

15th October 2015, 13:58
anda_skoa

Re: Vertical Center on ListView (Delegate) not working
Quote:

Originally Posted by QTmox

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.
Quote:
Originally Posted by QTmox

Code:

ListView { id: viewClass height: delegate01.height
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.
Quote:
Originally Posted by QTmox

Code:

Rectangle { anchors.verticalCenter: parent.verticalCenter
That doesn't make sense in a delegate of a vertical listview.

Quote:

Originally Posted by QTmox

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,
_

1 Attachment(s)

Re: Vertical Center on ListView (Delegate) not working

Sorry for being unprecise. I want the 2nd column to be positioned just like the first - nicely centered in the vertical center of the rectangle.

Added after 49 minutes:

I managed to get the second column aligned with the first one. However, the second row is still missing most of the modules. Why is it only showing the first entry of the model inside the original model?

I'm speaking of the "modules" :

Code:

"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"			
			}			
			]

As you can see, only "Mathematik 3" is being shown. The other entries are hidden.

Attachment 11435

KommiDelegate.qml

Code:

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
 
    states: [
 
        State{
            name: "clicked"
            PropertyChanges {target: delegate01; scale: 1.0; opacity: 1.0}
        }
 
    ]
 
    transitions: [
        Transition {
            from: ""
            to: "clicked"
            PropertyAnimation { properties: "scale"; easing.type: Easing.InOutQuad}
                PropertyAnimation { properties: "opacity"; easing.type: Easing.InOutQuad}
 
 
 
        },
 
 
        Transition {
            from: "clicked"
            to: ""
            PropertyAnimation { properties: "scale"; easing.type: Easing.InOutQuad}
            PropertyAnimation { properties: "opcaity"; easing.type: Easing.InOutQuad}
 
 
        }
 
    ]
 
 
 
 
    MouseArea {
        anchors.fill: parent
        onClicked: delegate01.state == 'clicked' ? delegate01.state="" : delegate01.state = 'clicked';
 
        }
 
 
        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
        height: column.height
        anchors.verticalCenter: parent.verticalCenter
 
 
        id: viewClass
 
        delegate: ClassDelegate {}
 
        spacing: 4
        cacheBuffer: 50
 
        model: modelData.modules
    }
 
 
 
}

ClassDelegate.qml

Code:

import QtQuick 2.0
 
 
    Component {
        id: classDelegate
            Column {
 
                id: column2
                Text{text: 'Description: ' + modelData.name}
                Text{text: 'ID: ' + modelData.identificationCode}
                Text{text: 'Severity: ' + modelData.severity}
                Text{text: 'Group: ' + modelData.lernenGroup}
            }
}

Kommilitonen.txt

Code:

[
	{
        "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"			
			}			
			]
	}
]

15th October 2015, 15:24
anda_skoa

Re: Vertical Center on ListView (Delegate) not working

Quote:

Originally Posted by QTmox

Sorry for being unprecise. I want the 2nd column to be positioned just like the first - nicely centered in the vertical center of the rectangle.

That's what I had initially assumed, but then you used the parent's height.

Quote:

Originally Posted by QTmox

However, the second row is still missing most of the modules. Why is it only showing the first entry of the model inside the original model?

I am not sure what you mean.
The class delegate has the same number of lines as the first column, so the list view, which has the height of the first column, can at most show one item fully or two partially (if you scroll so that one item ends inside the visible area and one item begins there)

Quote:

Originally Posted by QTmox

As you can see, only "Mathematik 3" is being shown. The other entries are hidden.

By default the view is at the beginning of the list. The delegate needs as much height as the list can offer, so only one entry is visible.

If the class delegate would for example only show one line, you would see four entries of the list.

What would you like to see?

Cheers,
_
15th October 2015, 15:27
QTmox

Re: Vertical Center on ListView (Delegate) not working

I want the second column to be scrollable, showing all the different modules ("Mathematik 3" , "Signale und Systeme" , ...) that belong to the person.

Right now it only says:

Mathematik 3
MA3
easy
no

I want that you can scroll down in that column to reveal the other entries:

Signale und Systeme
SS
easy
no

Elektronische Schaltungen
ES
easy
no

.... and so on

One student has multiple courses ("modules"), which are all supposed to be displayed in the second column, while the fist column shows the student's name, age, ...
15th October 2015, 18:05
anda_skoa

Re: Vertical Center on ListView (Delegate) not working

That should already be scrollable, you have a ListView in there.

Does it not scroll if you hold the mouse on the first entry and move upwards?

Cheers,
_
15th October 2015, 18:22
QTmox

1 Attachment(s)

Re: Vertical Center on ListView (Delegate) not working

Scrolling works with the students but not with the courses.

EDIT: Do I maybe have to assign a MouseArea for my second deleagte? If so, how? Only other explanation for me would be that the other elements from the model aren't even loading, therefore there's nothing to scroll for.

EDIT 2: When I increase the rows' height, still only entry is being shown! I guess that the other ones are just not loading?

Attachment 11438
16th October 2015, 07:03
QTmox

Re: Vertical Center on ListView (Delegate) not working

I managed to get more elements to show by setting the second list view's height to 500.

However, I still can't scroll in the second column.

Re: Vertical Center on ListView (Delegate) not working

I got it working!

I had to set the ListView's height to the delegate's height and set a specific width to get it scrolling (300 worked for me).
Code:

ListView { anchors.left: column.right anchors.leftMargin: 20 height: delegate01.height width: 300 id: viewClass delegate: ClassDelegate {} spacing: 4 cacheBuffer: 50 model: modelData.modules }
To be honest I'm not exactly sure why the height has to be set that way - but it's working :'D

16th October 2015, 14:34
anda_skoa

Re: Vertical Center on ListView (Delegate) not working

Or, maybe better, set the right anchor.

Cheers,
_