PDA

View Full Version : Vertical Center on ListView (Delegate) not working



QTmox
15th October 2015, 12:41
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:

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


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


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


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

anda_skoa
15th October 2015, 13:42
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
15th October 2015, 13:54
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
}


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)


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

anda_skoa
15th October 2015, 14:58
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


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


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

QTmox
15th October 2015, 16:00
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" :


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

11435




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

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


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


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

anda_skoa
15th October 2015, 16:24
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.



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)



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

QTmox
15th October 2015, 16:27
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, ...

anda_skoa
15th October 2015, 19:05
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,
_

QTmox
15th October 2015, 19:22
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?

11438

QTmox
16th October 2015, 08:03
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.

QTmox
16th October 2015, 11:33
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).


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

anda_skoa
16th October 2015, 15:34
Or, maybe better, set the right anchor.

Cheers,
_