Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML - RowLayout - not even spacing



  • 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:

    enter image description here

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


  • 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

Log in to reply