QML - RowLayout - not even spacing

[Vildnex]

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

import QtQuick 2.0
    import QtQuick.Layouts 1.14
    Item {
        width: 600
        height: 200
        RowLayout {
            anchors.fill: parent
            spacing: 50
            CustomButton{
                id: returnToPlaylistID
                Layout.preferredWidth: width
                iconSource: "Images/IMG.png"
                textSource: "Return back"
                iconHeight: parent.width/20
                iconWidth: parent.width/20
                padding: 0
            }
            CustomButton{
                id: playButton
                iconSource: "Images/IMG.png"
                textSource: ""
                padding: 0
 
                Layout.preferredWidth: width
                iconHeight: parent.width/20
                iconWidth: parent.width/20
            }
            CustomButton{
                id: stopButton
                iconSource: "Images/IMG.png"
                textSource: ""
                padding: 0
                Layout.preferredWidth: width
                iconHeight: parent.width/20
                iconWidth: parent.width/20
            }
        }
    }

import QtQuick 2.0
    import QtQuick.Layouts 1.14
    Item {
        width: 600
        height: 200
        RowLayout {
            anchors.fill: parent
            spacing: 50
            CustomButton{
                id: returnToPlaylistID
                Layout.preferredWidth: width
                iconSource: "Images/IMG.png"
                textSource: "Return back"
                iconHeight: parent.width/20
                iconWidth: parent.width/20
                padding: 0
            }
            CustomButton{
                id: playButton
                iconSource: "Images/IMG.png"
                textSource: ""
                padding: 0
    
                Layout.preferredWidth: width
                iconHeight: parent.width/20
                iconWidth: parent.width/20
            }
            CustomButton{
                id: stopButton
                iconSource: "Images/IMG.png"
                textSource: ""
                padding: 0
                Layout.preferredWidth: width
                iconHeight: parent.width/20
                iconWidth: parent.width/20
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

MY CUSTOM BUTTON

import QtQuick 2.4
    import QtQuick.Controls 2.12
    import QtGraphicalEffects 1.0
 
    Item{
        id: customButtonID
 
        property var isPressed: false
        property var iconSource: ""
        property var textSource: ""
        property var radiusValue: 20
        property var borderColor: "aqua"
        property var borderWidth: 5
        property var backgroundColor: "#ffffff"
        property var textColor: "#141414"
        property var spacing: row.width/10 * 1.2
 
        property var fontSize: 20
        property var fontBold: true
        property var padding: 15
 
        property var iconWidth: 0
        property var iconHeight: 0
 
 
        signal clicked
 
        property var _heigh: 0
 
        width: row.width
        height: textID.height
 
        scale: 0.8
 
        Rectangle{
            id: rectangle
 
            color: backgroundColor
            radius: radiusValue
 
            anchors.fill: parent
            anchors.margins: padding * -1
 
            border.color: borderColor
            border.width: customButtonID.isPressed ? borderWidth : 0
 
            Row{
                id: row
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                spacing: customButtonID.spacing
 
                Image{
                    id: iconID
                    source: iconSource
                    fillMode: Image.PreserveAspectFit
                    width: iconWidth
                    height: iconHeight
                }
                Text {
                    id: textID
                    fontSizeMode: Text.Fit
                    font.pixelSize: fontSize
                    font.bold: fontBold
                    text: "<font color='"+textColor+"'>" + textSource + "</font>"
                }
 
            }
        }
 
        MouseArea{
            anchors.margins: padding * -1
            anchors.fill: parent
            onPressed: isPressed = true
            onReleased: isPressed = false
            onClicked: customButtonID.clicked()
        }
    }

import QtQuick 2.4
    import QtQuick.Controls 2.12
    import QtGraphicalEffects 1.0
    
    Item{
        id: customButtonID
    
        property var isPressed: false
        property var iconSource: ""
        property var textSource: ""
        property var radiusValue: 20
        property var borderColor: "aqua"
        property var borderWidth: 5
        property var backgroundColor: "#ffffff"
        property var textColor: "#141414"
        property var spacing: row.width/10 * 1.2
    
        property var fontSize: 20
        property var fontBold: true
        property var padding: 15
    
        property var iconWidth: 0
        property var iconHeight: 0
    
    
        signal clicked
    
        property var _heigh: 0
    
        width: row.width
        height: textID.height
    
        scale: 0.8
    
        Rectangle{
            id: rectangle
    
            color: backgroundColor
            radius: radiusValue
    
            anchors.fill: parent
            anchors.margins: padding * -1
    
            border.color: borderColor
            border.width: customButtonID.isPressed ? borderWidth : 0
    
            Row{
                id: row
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                spacing: customButtonID.spacing
    
                Image{
                    id: iconID
                    source: iconSource
                    fillMode: Image.PreserveAspectFit
                    width: iconWidth
                    height: iconHeight
                }
                Text {
                    id: textID
                    fontSizeMode: Text.Fit
                    font.pixelSize: fontSize
                    font.bold: fontBold
                    text: "<font color='"+textColor+"'>" + textSource + "</font>"
                }
    
            }
        }
    
        MouseArea{
            anchors.margins: padding * -1
            anchors.fill: parent
            onPressed: isPressed = true
            onReleased: isPressed = false
            onClicked: customButtonID.clicked()
        }
    }

To copy to clipboard, switch view to plain text mode 

[shriup]

Hi @Vildnex ,

in your CustomButton.qml, make this change

implicitWidth: row.width
  height: textID.height

implicitWidth: row.width
  height: textID.height

To copy to clipboard, switch view to plain text mode 

and in your main Layout make this change

Layout.fillWidth: true
   //Layout.preferredWidth: width

Layout.fillWidth: true
   //Layout.preferredWidth: width

To copy to clipboard, switch view to plain text mode