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:

13427

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
}
}
}

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()
}
}

[shriup]

Hi @Vildnex ,

in your CustomButton.qml, make this change


implicitWidth: row.width
height: textID.height

and in your main Layout make this change


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