Results 1 to 12 of 12

Thread: Vertical Center on ListView (Delegate) not working

  1. #1
    Join Date
    Oct 2015
    Posts
    7
    Thanks
    1

    Exclamation Vertical Center on ListView (Delegate) not working

    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 

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

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

  3. #3
    Join Date
    Oct 2015
    Posts
    7
    Thanks
    1

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

    Quote Originally Posted by anda_skoa View Post
    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.

    Qt Code:
    1. ListView
    2. {
    3.  
    4.  
    5. id: viewClass
    6. height: delegate01.height
    7.  
    8. anchors.left: column.right
    9. anchors.leftMargin: 20
    10. anchors.verticalCenter: parent.verticalCenter
    11.  
    12. delegate: ClassDelegate {}
    13.  
    14. spacing: 4
    15. cacheBuffer: 50
    16.  
    17.  
    18. model: modelData.modules
    19. }
    To copy to clipboard, switch view to plain text mode 

    Qt Code:
    1. import QtQuick 2.0
    2.  
    3.  
    4. Rectangle {
    5. anchors.verticalCenter: parent.verticalCenter
    6. id: classDelegate
    7. anchors{left: parent.left; right: parent.right}
    8. visible: true
    9.  
    10. Column {
    11.  
    12. id: column2
    13. Text{text: 'Description: ' + modelData.name}
    14. Text{text: 'ID: ' + modelData.identificationCode}
    15. Text{text: 'Severity: ' + modelData.severity}
    16. Text{text: 'Group: ' + modelData.lernenGroup}
    17. }
    18. }
    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)

    Qt Code:
    1. [
    2. {
    3. "forename": "Hans",
    4. "name": "Mayer",
    5. "course": "TIB",
    6. "age": 22,
    7. "matriculationNumber": 942538,
    8. "image": "images/mann.jpg",
    9. "semseter": 3,
    10. "modules": [
    11. {
    12. "name": "Mathematik 3",
    13. "identificationCode": "MA3",
    14. "severity": "easy",
    15. "lernenGroup": "no"
    16. },{
    17. "name": "Signale und Systeme",
    18. "identificationCode": "SS",
    19. "severity": "easy",
    20. "lernenGroup": "no"
    21. },{
    22. "name": "Elektronische Schaltungen",
    23. "identificationCode": "ES",
    24. "severity": "easy",
    25. "lernenGroup": "no"
    26. },{
    27. "name": "Digital- und Mikrocomputertechnik",
    28. "identificationCode": "DMC",
    29. "severity": "easy",
    30. "lernenGroup": "no"
    31. },{
    32. "name": "Softwareentwicklungsmethoden und Tools",
    33. "identificationCode": "SET",
    34. "severity": "easy",
    35. "lernenGroup": "no"
    36. },{
    37. "name": "Bildgebende Verfahren in der Medizin",
    38. "identificationCode": "SET",
    39. "severity": "easy",
    40. "lernenGroup": "no"
    41. }
    42. ]
    43. },{
    44. "forename": "Verena",
    45. "name": "Kaiser",
    46. "course": "MTB",
    47. "age": 24,
    48. "matriculationNumber": 942538,
    49. "image": "images/frau.png",
    50. "semseter": 3,
    51. "modules": [
    52. {
    53. "name": "Mathematik 3",
    54. "identificationCode": "MA3",
    55. "severity": "easy",
    56. "lernenGroup": "yes"
    57. },{
    58. "name": "Signale und Systeme",
    59. "identificationCode": "SS",
    60. "severity": "easy",
    61. "lernenGroup": "no"
    62. },{
    63. "name": "Elektronische Schaltungen",
    64. "identificationCode": "ES",
    65. "severity": "easy",
    66. "lernenGroup": "no"
    67. },{
    68. "name": "Digital- und Mikrocomputertechnik",
    69. "identificationCode": "DMC",
    70. "severity": "easy",
    71. "lernenGroup": "no"
    72. },{
    73. "name": "Softwareentwicklungsmethoden und Tools",
    74. "identificationCode": "SET",
    75. "severity": "difficult",
    76. "lernenGroup": "no"
    77. },{
    78. "name": "Bildgebende Verfahren in der Medizin",
    79. "identificationCode": "SET",
    80. "severity": "easy",
    81. "lernenGroup": "no"
    82. }
    83. ]
    84. }
    85. ]
    To copy to clipboard, switch view to plain text mode 
    Last edited by QTmox; 15th October 2015 at 13:15.

  4. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

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

    Quote Originally Posted by QTmox View Post
    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 View Post
    Qt Code:
    1. ListView
    2. {
    3.  
    4.  
    5. id: viewClass
    6. 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.

    Quote Originally Posted by QTmox View Post
    Qt Code:
    1. Rectangle {
    2. 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.

    Quote Originally Posted by QTmox View Post
    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,
    _

  5. #5
    Join Date
    Oct 2015
    Posts
    7
    Thanks
    1

    Default 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" :

    Qt Code:
    1. "modules": [
    2. {
    3. "name": "Mathematik 3",
    4. "identificationCode": "MA3",
    5. "severity": "easy",
    6. "lernenGroup": "no"
    7. },{
    8. "name": "Signale und Systeme",
    9. "identificationCode": "SS",
    10. "severity": "easy",
    11. "lernenGroup": "no"
    12. },{
    13. "name": "Elektronische Schaltungen",
    14. "identificationCode": "ES",
    15. "severity": "easy",
    16. "lernenGroup": "no"
    17. },{
    18. "name": "Digital- und Mikrocomputertechnik",
    19. "identificationCode": "DMC",
    20. "severity": "easy",
    21. "lernenGroup": "no"
    22. },{
    23. "name": "Softwareentwicklungsmethoden und Tools",
    24. "identificationCode": "SET",
    25. "severity": "easy",
    26. "lernenGroup": "no"
    27. },{
    28. "name": "Bildgebende Verfahren in der Medizin",
    29. "identificationCode": "SET",
    30. "severity": "easy",
    31. "lernenGroup": "no"
    32. }
    33. ]
    To copy to clipboard, switch view to plain text mode 

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

    komlist2.jpg




    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. states: [
    15.  
    16. State{
    17. name: "clicked"
    18. PropertyChanges {target: delegate01; scale: 1.0; opacity: 1.0}
    19. }
    20.  
    21. ]
    22.  
    23. transitions: [
    24. Transition {
    25. from: ""
    26. to: "clicked"
    27. PropertyAnimation { properties: "scale"; easing.type: Easing.InOutQuad}
    28. PropertyAnimation { properties: "opacity"; easing.type: Easing.InOutQuad}
    29.  
    30.  
    31.  
    32. },
    33.  
    34.  
    35. Transition {
    36. from: "clicked"
    37. to: ""
    38. PropertyAnimation { properties: "scale"; easing.type: Easing.InOutQuad}
    39. PropertyAnimation { properties: "opcaity"; easing.type: Easing.InOutQuad}
    40.  
    41.  
    42. }
    43.  
    44. ]
    45.  
    46.  
    47.  
    48.  
    49. MouseArea {
    50. anchors.fill: parent
    51. onClicked: delegate01.state == 'clicked' ? delegate01.state="" : delegate01.state = 'clicked';
    52.  
    53. }
    54.  
    55.  
    56. Image {
    57. id: img
    58. anchors.left: parent.left
    59. anchors.leftMargin: 20
    60. source: modelData.image
    61. smooth: true
    62. opacity: 0.3
    63. Behavior on opacity {NumberAnimation{easing.type:Easing.OutQuad}}
    64.  
    65. }
    66.  
    67. Column {
    68. id: column
    69. height: 50
    70. anchors.verticalCenter: parent.verticalCenter
    71. anchors.left: img.right
    72. anchors.leftMargin: 20
    73. Text{text: 'First Name: ' + modelData.forename}
    74. Text{text: 'Name: ' + modelData.name}
    75. Text{text: 'University Course: ' + modelData.course}
    76. Text{text: 'Age: ' + modelData.age}
    77.  
    78.  
    79. }
    80.  
    81.  
    82.  
    83.  
    84.  
    85. ListView
    86. {
    87. anchors.left: column.right
    88. anchors.leftMargin: 20
    89. height: column.height
    90. anchors.verticalCenter: parent.verticalCenter
    91.  
    92.  
    93. id: viewClass
    94.  
    95. delegate: ClassDelegate {}
    96.  
    97. spacing: 4
    98. cacheBuffer: 50
    99.  
    100. model: modelData.modules
    101. }
    102.  
    103.  
    104.  
    105. }
    To copy to clipboard, switch view to plain text mode 


    ClassDelegate.qml

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


    Kommilitonen.txt

    Qt Code:
    1. [
    2. {
    3. "forename": "Hans",
    4. "name": "Mayer",
    5. "course": "TIB",
    6. "age": 22,
    7. "matriculationNumber": 942538,
    8. "image": "images/mann.jpg",
    9. "semseter": 3,
    10. "modules": [
    11. {
    12. "name": "Mathematik 3",
    13. "identificationCode": "MA3",
    14. "severity": "easy",
    15. "lernenGroup": "no"
    16. },{
    17. "name": "Signale und Systeme",
    18. "identificationCode": "SS",
    19. "severity": "easy",
    20. "lernenGroup": "no"
    21. },{
    22. "name": "Elektronische Schaltungen",
    23. "identificationCode": "ES",
    24. "severity": "easy",
    25. "lernenGroup": "no"
    26. },{
    27. "name": "Digital- und Mikrocomputertechnik",
    28. "identificationCode": "DMC",
    29. "severity": "easy",
    30. "lernenGroup": "no"
    31. },{
    32. "name": "Softwareentwicklungsmethoden und Tools",
    33. "identificationCode": "SET",
    34. "severity": "easy",
    35. "lernenGroup": "no"
    36. },{
    37. "name": "Bildgebende Verfahren in der Medizin",
    38. "identificationCode": "SET",
    39. "severity": "easy",
    40. "lernenGroup": "no"
    41. }
    42. ]
    43. },{
    44. "forename": "Verena",
    45. "name": "Kaiser",
    46. "course": "MTB",
    47. "age": 24,
    48. "matriculationNumber": 942538,
    49. "image": "images/frau.png",
    50. "semseter": 3,
    51. "modules": [
    52. {
    53. "name": "Mathematik 3",
    54. "identificationCode": "MA3",
    55. "severity": "easy",
    56. "lernenGroup": "yes"
    57. },{
    58. "name": "Signale und Systeme",
    59. "identificationCode": "SS",
    60. "severity": "easy",
    61. "lernenGroup": "no"
    62. },{
    63. "name": "Elektronische Schaltungen",
    64. "identificationCode": "ES",
    65. "severity": "easy",
    66. "lernenGroup": "no"
    67. },{
    68. "name": "Digital- und Mikrocomputertechnik",
    69. "identificationCode": "DMC",
    70. "severity": "easy",
    71. "lernenGroup": "no"
    72. },{
    73. "name": "Softwareentwicklungsmethoden und Tools",
    74. "identificationCode": "SET",
    75. "severity": "difficult",
    76. "lernenGroup": "no"
    77. },{
    78. "name": "Bildgebende Verfahren in der Medizin",
    79. "identificationCode": "SET",
    80. "severity": "easy",
    81. "lernenGroup": "no"
    82. }
    83. ]
    84. }
    85. ]
    To copy to clipboard, switch view to plain text mode 
    Last edited by QTmox; 15th October 2015 at 15:00.

  6. #6
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

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

    Quote Originally Posted by QTmox View Post
    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 View Post
    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 View Post
    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,
    _

  7. #7
    Join Date
    Oct 2015
    Posts
    7
    Thanks
    1

    Default 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, ...
    Last edited by QTmox; 15th October 2015 at 15:49.

  8. #8
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

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

  9. #9
    Join Date
    Oct 2015
    Posts
    7
    Thanks
    1

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

    big.jpg
    Last edited by QTmox; 15th October 2015 at 18:35.

  10. #10
    Join Date
    Oct 2015
    Posts
    7
    Thanks
    1

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

  11. #11
    Join Date
    Oct 2015
    Posts
    7
    Thanks
    1

    Default 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).

    Qt Code:
    1. ListView
    2. {
    3. anchors.left: column.right
    4. anchors.leftMargin: 20
    5. height: delegate01.height
    6. width: 300
    7.  
    8.  
    9.  
    10. id: viewClass
    11.  
    12. delegate: ClassDelegate {}
    13.  
    14. spacing: 4
    15. cacheBuffer: 50
    16.  
    17. model: modelData.modules
    18. }
    To copy to clipboard, switch view to plain text mode 


    To be honest I'm not exactly sure why the height has to be set that way - but it's working :'D

  12. #12
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

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

    Or, maybe better, set the right anchor.

    Cheers,
    _

  13. The following user says thank you to anda_skoa for this useful post:

    QTmox (16th October 2015)

Similar Threads

  1. Replies: 6
    Last Post: 21st May 2015, 19:53
  2. Replies: 1
    Last Post: 23rd June 2012, 13:23
  3. vertical keypressevent not working on graphicsitem
    By creatio.x in forum Qt Programming
    Replies: 3
    Last Post: 25th December 2009, 11:23
  4. Replies: 1
    Last Post: 21st November 2009, 20:38
  5. Replies: 5
    Last Post: 10th August 2009, 10:50

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.