QML - RowLayout - not even spacing - qt

Question

WHAT I'M TRYING TO DO:
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()
}
}

Answer 1

It is about your textSource. Spacing is even, it starts when your layout item ends. You need to check your Text {} width to fix

Answer 2

You can't set width property to row, it grows dynamically based on the items you add to it, but define the height. Opposite is true for column.
Second thing is you can't horizontally center a row.
With the following modifications even spacing should works. Please check.
Note: if you want to center the elements then try with the item that holds the buttons.
CustomButton.qml
import QtQuick 2.4
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
Rectangle{
id: rectangle
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
color: backgroundColor
radius: radiusValue
border.color: borderColor
border.width: rectangle.isPressed ? borderWidth : 0
Row{
id: row
// you can't horizonally center a row
// anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: rectangle.spacing
height: 50
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: rectangle.clicked()
}
}
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
width: 600
height: 200
RowLayout {
anchors.fill: parent
spacing: 50
// lets have some left and right margins
anchors.leftMargin: 20
anchors.rightMargin: 20
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
}
}
}
}

Answer 3

What's happening is the RowLayout is set to fill the parent. It then has three children to layout. However, they do not have implicit widths. Therefore it will stretch one of them to force them all to fit.
If you want even spacing between them, you actually need to add the equivalent of spacers between them:
Item {
Layout.fillWidth: true
}
You'll probably want to set spacing: 0 on the RowLayout if you use that technique.
And you will likely want to set an implicit width on the CustomButton to ensure they don't grow:
implicitWidth: row.width