Results 1 to 2 of 2

Thread: QML - RowLayout - not even spacing

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Join Date
    Mar 2020
    Posts
    7
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Exclamation QML - RowLayout - not even spacing

    I'm new to QML and Qt in general so sorry if this question may sound ridiculous for some of us, but I would really like to receive some help. I'm not able to figure this thing out for almost 3 days already.

    WHAT I'M TRYING TO DO:

    0ruti.png

    I have a RowLayer where I've added 3 custom buttons but for some reason, I can not obtain an even spacing between them, and I'm not sure if I'm doing something wrong on the RowLayer side or the implementation of a custom button is wrong from some whatever reason.

    MY LAYOUT

    Qt Code:
    1. import QtQuick 2.0
    2. import QtQuick.Layouts 1.14
    3. Item {
    4. width: 600
    5. height: 200
    6. RowLayout {
    7. anchors.fill: parent
    8. spacing: 50
    9. CustomButton{
    10. id: returnToPlaylistID
    11. Layout.preferredWidth: width
    12. iconSource: "Images/IMG.png"
    13. textSource: "Return back"
    14. iconHeight: parent.width/20
    15. iconWidth: parent.width/20
    16. padding: 0
    17. }
    18. CustomButton{
    19. id: playButton
    20. iconSource: "Images/IMG.png"
    21. textSource: ""
    22. padding: 0
    23.  
    24. Layout.preferredWidth: width
    25. iconHeight: parent.width/20
    26. iconWidth: parent.width/20
    27. }
    28. CustomButton{
    29. id: stopButton
    30. iconSource: "Images/IMG.png"
    31. textSource: ""
    32. padding: 0
    33. Layout.preferredWidth: width
    34. iconHeight: parent.width/20
    35. iconWidth: parent.width/20
    36. }
    37. }
    38. }
    To copy to clipboard, switch view to plain text mode 

    MY CUSTOM BUTTON

    Qt Code:
    1. import QtQuick 2.4
    2. import QtQuick.Controls 2.12
    3. import QtGraphicalEffects 1.0
    4.  
    5. Item{
    6. id: customButtonID
    7.  
    8. property var isPressed: false
    9. property var iconSource: ""
    10. property var textSource: ""
    11. property var radiusValue: 20
    12. property var borderColor: "aqua"
    13. property var borderWidth: 5
    14. property var backgroundColor: "#ffffff"
    15. property var textColor: "#141414"
    16. property var spacing: row.width/10 * 1.2
    17.  
    18. property var fontSize: 20
    19. property var fontBold: true
    20. property var padding: 15
    21.  
    22. property var iconWidth: 0
    23. property var iconHeight: 0
    24.  
    25.  
    26. signal clicked
    27.  
    28. property var _heigh: 0
    29.  
    30. width: row.width
    31. height: textID.height
    32.  
    33. scale: 0.8
    34.  
    35. Rectangle{
    36. id: rectangle
    37.  
    38. color: backgroundColor
    39. radius: radiusValue
    40.  
    41. anchors.fill: parent
    42. anchors.margins: padding * -1
    43.  
    44. border.color: borderColor
    45. border.width: customButtonID.isPressed ? borderWidth : 0
    46.  
    47. Row{
    48. id: row
    49. anchors.horizontalCenter: parent.horizontalCenter
    50. anchors.verticalCenter: parent.verticalCenter
    51. spacing: customButtonID.spacing
    52.  
    53. Image{
    54. id: iconID
    55. source: iconSource
    56. fillMode: Image.PreserveAspectFit
    57. width: iconWidth
    58. height: iconHeight
    59. }
    60. Text {
    61. id: textID
    62. fontSizeMode: Text.Fit
    63. font.pixelSize: fontSize
    64. font.bold: fontBold
    65. text: "<font color='"+textColor+"'>" + textSource + "</font>"
    66. }
    67.  
    68. }
    69. }
    70.  
    71. MouseArea{
    72. anchors.margins: padding * -1
    73. anchors.fill: parent
    74. onPressed: isPressed = true
    75. onReleased: isPressed = false
    76. onClicked: customButtonID.clicked()
    77. }
    78. }
    To copy to clipboard, switch view to plain text mode 

  2. #2
    Join Date
    Apr 2020
    Location
    Bangalore
    Posts
    2
    Qt products
    Qt5
    Platforms
    MacOS X Unix/X11 Windows Android

    Default Re: QML - RowLayout - not even spacing

    Hi @Vildnex ,

    in your CustomButton.qml, make this change

    Qt Code:
    1. implicitWidth: row.width
    2. height: textID.height
    To copy to clipboard, switch view to plain text mode 

    and in your main Layout make this change

    Qt Code:
    1. Layout.fillWidth: true
    2. //Layout.preferredWidth: width
    To copy to clipboard, switch view to plain text mode 

Similar Threads

  1. Spacing between QListWidgetItems
    By DavidLinSuperstar in forum Newbie
    Replies: 1
    Last Post: 26th September 2014, 19:08
  2. QHBoxLayout widget spacing
    By K4ELO in forum Qt Programming
    Replies: 2
    Last Post: 7th March 2013, 14:47
  3. What is the line spacing
    By smoozer in forum Qt Programming
    Replies: 3
    Last Post: 9th September 2009, 17:26
  4. Problem in layout spacing
    By mails.hemant in forum Qt Tools
    Replies: 15
    Last Post: 24th November 2008, 12:48
  5. Problem with spacing
    By ali22 in forum Qt Tools
    Replies: 1
    Last Post: 21st January 2008, 18:51

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.