Нельзя установить для свойства width значение row, оно динамически увеличивается в зависимости от добавляемых в него элементов, но определяет высоту. Противоположное верно для столбца.
Во-вторых, вы не можете центрировать строку по горизонтали.
При следующих модификациях даже интервал должен работать. Пожалуйста, проверьте.
Примечание: если вы хотите центрировать элементы, попробуйте элемент с кнопками.
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
}
}
}
}