CODEWITHSUNDEEP
qtqml
Mircea
Mircea

Reputation: 1999

QML - RowLayout - not even spacing

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

Upvotes: 0

Views: 3971

Answers (3)

David K. Hess
David K. Hess

Reputation: 17246

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

Upvotes: 1

cppiscute
cppiscute

Reputation: 747

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

Upvotes: 0

MK MarineBoy
MK MarineBoy

Reputation: 21

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

Upvotes: 0

Related Questions