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

Qt Code: 
  1. import QtQuick 2.3
  2. import QtQuick.Controls 1.2
  3.  
  4. ApplicationWindow {
  5.     id: root
  6.  
  7.     width: 800; height: 600   
  8.  
  9.     function readFile() {
  10.         var request = new XMLHttpRequest()
  11.  
  12.         request.open('GET', 'qrc:/Kommilitonen.txt')
  13.         request.onreadystatechange = function(event) {
  14.  
  15.  
  16.             if(request.readyState == XMLHttpRequest.DONE)
  17.             {
  18.                 console.log(request.responseText)
  19.                 view.model = JSON.parse(request.responseText)
  20.             }
  21.         }
  22.  
  23.         request.send();
  24.     }
  25.  
  26.     ListView {
  27.         id: view
  28.  
  29.         property real delegateOpacity: 0.5
  30.  
  31.         anchors {fill: parent; margins: 2}
  32.  
  33.         delegate: KommiDelegate {}
  34.  
  35.         spacing: 4
  36.         cacheBuffer: 50
  37.     }
  38.  
  39.     Component.onCompleted: {
  40.         root.visible = true
  41.         readFile();
  42.     }
  43.  
  44. }
To copy to clipboard, switch view to plain text mode 


KommiDelegate.qml

Qt Code: 
  1. import QtQuick 2.3
  2.  
  3. Rectangle {
  4.     id: delegate01
  5.     anchors{left: parent.left; right: parent.right}
  6.     height: 100
  7.     border.width: 2
  8.     border.color: "lightsteelblue"
  9.     radius: 10
  10.     clip: true
  11.     opacity: 0.5
  12.     scale: 0.9
  13.  
  14.     NumberAnimation{
  15.         id: animateOpacity
  16.         target: delegate01
  17.         properties: "opacity"
  18.         from: 0.9
  19.         to: 1.0
  20.         easing {type: Easing.OutBack; overshoot: 500}
  21.     }
  22.  
  23.  
  24.  
  25.     MouseArea {
  26.         anchors.fill: parent
  27.         onPressed: {
  28.             if(parent.opacity == 0.5)
  29.                 parent.opacity = 1.0
  30.             else
  31.                 parent.opacity = 0.5
  32.             if(parent.scale==0.9)
  33.                 parent.scale = 1.0
  34.             else
  35.                 parent.scale = 0.9
  36.  
  37.         }
  38.     }
  39.  
  40.         Image {
  41.             id: img
  42.             anchors.left: parent.left
  43.             anchors.leftMargin: 20
  44.             source: modelData.image
  45.             smooth: true
  46.             opacity: 0.3
  47.             Behavior on opacity {NumberAnimation{easing.type:Easing.OutQuad}}
  48.  
  49.         }
  50.  
  51.         Column {
  52.             id: column
  53.             height: 50
  54.             anchors.verticalCenter: parent.verticalCenter
  55.             anchors.left: img.right
  56.             anchors.leftMargin: 20
  57.             Text{text: 'First Name: ' + modelData.forename}
  58.             Text{text: 'Name: ' + modelData.name}
  59.             Text{text: 'University Course: ' + modelData.course}
  60.             Text{text: 'Age: ' + modelData.age}
  61.  
  62.  
  63.         }
  64.  
  65.  
  66.  
  67.  
  68.  
  69.     ListView
  70.     {
  71.         anchors.left: column.right
  72.         anchors.leftMargin: 20
  73.         anchors.verticalCenter: parent.verticalCenter
  74.  
  75.         id: viewClass
  76.  
  77.         delegate: ClassDelegate {}
  78.  
  79.         spacing: 4
  80.         cacheBuffer: 50
  81.  
  82.         model: modelData.modules
  83.     }
  84.  
  85.  
  86.  
  87. }
To copy to clipboard, switch view to plain text mode 


ClassDelegate.qml

Qt Code: 
  1. import QtQuick 2.0
  2.  
  3.  
  4.     Rectangle {
  5.         id: classDelegate
  6.         anchors{left: parent.left; right: parent.right}
  7.         visible: true
  8.  
  9.             Column {
  10.  
  11.                 id: column2
  12.                 Text{text: 'Description: ' + modelData.name}
  13.                 Text{text: 'ID: ' + modelData.identificationCode}
  14.                 Text{text: 'Severity: ' + modelData.severity}
  15.                 Text{text: 'Group: ' + modelData.lernenGroup}
  16.             }
  17. }
To copy to clipboard, switch view to plain text mode