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