Results 1 to 18 of 18

Thread: QListView ~ Center items horizontally

  1. #1
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default QListView ~ Center items horizontally

    I have two QListViews, acting much like a contacts list.

    ListA has and alphabetical listing ('A' - 'Z'), that allows the user to select a letter. Once done, ListB is popuplated with the corresponding names (ie. all 'A' names, 'B' names, etc...)

    A QListView seems to always align each item to the left. The issue is that in ListA, where each item is a single character, each item gets shoved all the way left. I would like to make that QListView align each item in the horizontal center, which will make them a bit more readable.

    How do I do that?

  2. #2
    Join Date
    Jan 2012
    Location
    Dortmund, Germany
    Posts
    159
    Thanks
    69
    Thanked 10 Times in 8 Posts
    Qt products
    Qt4
    Platforms
    Windows Android

    Default Re: QListView ~ Center items horizontally

    Have you set a delegate?
    That is, if you mean QtQuick's ListView. QListView is a QWidget, iirc, so the forum would be wrong.
    Some code would be helpful either way!

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

    Default Re: QListView ~ Center items horizontally

    You can use a custom delegate or make the model provide a different value for the Qt::TextAlignmentRole.

    Cheers,
    _

  4. #4
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: QListView ~ Center items horizontally

    Quote Originally Posted by anda_skoa View Post
    You can use a custom delegate or make the model provide a different value for the Qt::TextAlignmentRole.

    Cheers,
    _
    I'm not seeing how to provide the TextAlignmentRole to my Model... How do I do that?

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

    Default Re: QListView ~ Center items horizontally

    It is one of the roles the standard item delegate will request from the model, i.e. your model's data() method will be called with that role.

    Cheers,
    _

  6. #6
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: QListView ~ Center items horizontally

    I set up my ListView like this:

    Qt Code:
    1. ListView {
    2. id: boatAlphaList
    3. anchors.fill: parent
    4.  
    5. ListModel {
    6. id: boatAlphaModel
    7. ListElement {
    8. boatAlphaName: "..."
    9. boatAlphaID: "0"
    10. }
    11. }
    12.  
    13. Component {
    14. id: boatAlphaDelegate
    15. Item {
    16. id: boatAlphaContainer
    17. width: parent.width
    18. anchors.horizontalCenter: parent.horizontalCenter
    19. height: Funcs.pointHeight(14)
    20. Column {
    21. Text {
    22. font.pixelSize: Funcs.fontHeight(12)
    23. text: boatAlphaName
    24. horizontalAlignment: Text.AlignHCenter
    25. }
    26. }
    27.  
    28. MouseArea {
    29. id: boatAlphaMouseArea
    30. anchors.fill: parent
    31. hoverEnabled: true
    32. onClicked: {
    33. boatAlphaList.currentIndex = index
    34. }
    35. }
    36. }
    37. }
    38.  
    39. model: boatAlphaModel
    40. delegate: boatAlphaDelegate
    41. highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
    42. highlightFollowsCurrentItem: true
    43. highlightMoveDuration: 250
    44. highlightMoveVelocity: 50
    45. focus: true
    46. spacing: Funcs.fontHeight(8)
    47. clip: true
    48. currentIndex: -1
    49. onCurrentItemChanged: {
    50. appWin.myBoatAlpha = boatAlphaModel.get(boatAlphaList.currentIndex).boatAlphaName;
    51. Funcs.loadSelectedBoats();
    52. }
    53. }
    54. }
    To copy to clipboard, switch view to plain text mode 

    So, where and how do I set the alignment?

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

    Default Re: QListView ~ Center items horizontally

    Quote Originally Posted by scgrant327 View Post
    I set up my ListView like this:
    Ah, you changed your UI from QListView to a QtQuick ListView?

    Then this is easier, QtQuick ListView makes creating custom delegates easier, in fact it requires it.

    Quote Originally Posted by scgrant327 View Post
    So, where and how do I set the alignment?
    Looks like you already do.
    However, you don't specify any width for the text element, so it is as wide as the text.
    So the text is by definition aligned left, right and center.

    Cheers,
    _

  8. #8
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: QListView ~ Center items horizontally

    It was always a QtQuick ListView...sorry if I misspoke before.

    I tried aligning the text...but it moved it to where each letter was centered under the lefthand border...

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

    Default Re: QListView ~ Center items horizontally

    Can you show the code you have for your delegate component now?

    Alternatively to aligning the text in a resized text element, you could also try using the text in its default size and anchoring it horizontally centered.

    Cheers,
    _

  10. #10
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: QListView ~ Center items horizontally

    Quote Originally Posted by anda_skoa View Post
    Alternatively to aligning the text in a resized text element, you could also try using the text in its default size and anchoring it horizontally centered.
    _
    Isn't that what I'm already doing?

    Qt Code:
    1. 21. Text {
    2.  
    3. 22. font.pixelSize: Funcs.fontHeight(12)
    4.  
    5. 23. text: boatAlphaName
    6.  
    7. 24. horizontalAlignment: Text.AlignHCenter
    8.  
    9. 25. }
    To copy to clipboard, switch view to plain text mode 

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

    Default Re: QListView ~ Center items horizontally

    Quote Originally Posted by scgrant327 View Post
    Isn't that what I'm already doing?
    I don't know, you are not posting enough of the delegate to see if you are e.g. horizontally anchoring the column inside its parent.
    We can only see that you are not anchoring the text inside the column

    Cheers,
    _

  12. #12
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: QListView ~ Center items horizontally

    Post #6 above has the full code.

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

    Default Re: QListView ~ Center items horizontally

    Ah, then my suggestion in comment #9 still applies.

    Cheers,
    _

  14. #14
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: QListView ~ Center items horizontally

    Again... #10.

    Aren't I already doing that? If not, then were am I going wrong?

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

    Default Re: QListView ~ Center items horizontally

    Quote Originally Posted by scgrant327 View Post
    Again... #10.
    But maybe I am just not seeing the correct code, can you point out where in which line in the code snippet of #10 you are using anchors?

    Cheers,
    _

  16. #16
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: QListView ~ Center items horizontally

    Qt Code:
    1. 13. Component {
    2.  
    3. 14. id: boatAlphaDelegate
    4.  
    5. 15. Item {
    6.  
    7. 16. id: boatAlphaContainer
    8.  
    9. 17. width: parent.width
    10.  
    11. 18. anchors.horizontalCenter: parent.horizontalCenter
    12.  
    13. 19. height: Funcs.pointHeight(14)
    14.  
    15. 20. Column {
    16.  
    17. 21. Text {
    18.  
    19. 22. font.pixelSize: Funcs.fontHeight(12)
    20.  
    21. 23. text: boatAlphaName
    22.  
    23. 24. horizontalAlignment: Text.AlignHCenter
    24.  
    25. 25. }
    26.  
    27. 26. }
    28.  
    29. 27.
    30.  
    31. 28. MouseArea {
    32.  
    33. 29. id: boatAlphaMouseArea
    34.  
    35. 30. anchors.fill: parent
    36.  
    37. 31. hoverEnabled: true
    38.  
    39. 32. onClicked: {
    40.  
    41. 33. boatAlphaList.currentIndex = index
    42.  
    43. 34. }
    44.  
    45. 35. }
    46.  
    47. 36. }
    48.  
    49. 37. }
    To copy to clipboard, switch view to plain text mode 

    Lines 18 & 24?

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

    Default Re: QListView ~ Center items horizontally

    Line 18 has no effect, since the item is as wide as its parent.

    Line 24 is no anchor and, as previously explained, has no effect since the Text element has just enough width to hold the text.
    Basically the same result as line 18.

    In order to center something inside something else, the first needs to be smaller than the latter, or the latter needs to be bigger.

    So what you have is
    - a Text element that is just wide enough to display the text
    - a Column element that is just as wide and positioned at 0/0 (default position)

    What you want is
    - a Column element that is larger than the Text, probably as wide as its parent
    - either a Text element horizontally anchored in it or a Text element with the same width and using alignment

    Cheers,
    _

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

    scgrant327 (15th March 2016)

  19. #18
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: QListView ~ Center items horizontally

    Thanks for pointing me in the right direction:

    What you want is
    - a Column element that is larger than the Text, probably as wide as its parent
    - either a Text element horizontally anchored in it or a Text element with the same width and using alignment

Similar Threads

  1. Replies: 7
    Last Post: 9th September 2013, 08:31
  2. Center icon in QListView using QStyledItemDelegate
    By franki in forum Qt Programming
    Replies: 1
    Last Post: 11th June 2013, 08:53
  3. How to align list items to the center?
    By zgulser in forum Qt Tools
    Replies: 4
    Last Post: 9th February 2009, 09:52
  4. Center TabBar horizontally on the TabWidget
    By forrestfsu in forum Qt Programming
    Replies: 8
    Last Post: 14th March 2007, 14:26
  5. Q3listbox center items
    By sreedhar in forum Qt Programming
    Replies: 3
    Last Post: 24th February 2006, 11:21

Tags for this Thread

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.