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:

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

Shrinidhi Upadhyaya

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