QML - RowLayout - स्पेसिंग भी नहीं

यह आपके टेक्स्टसोर्स के बारे में है। रिक्ति सम है, यह तब शुरू होती है जब आपका लेआउट आइटम समाप्त होता है। ठीक करने के लिए आपको अपने टेक्स्ट {} की चौड़ाई की जांच करनी होगी

आप चौड़ाई संपत्ति को 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
            }
        }
    }
}

क्या हो रहा है RowLayout माता-पिता को भरने के लिए तैयार है। इसके बाद लेआउट के लिए तीन बच्चे हैं। हालांकि, उनके पास अंतर्निहित चौड़ाई नहीं है। इसलिए यह उन सभी को फिट होने के लिए मजबूर करने के लिए उनमें से एक को खींचेगा।

यदि आप उनके बीच भी अंतर करना चाहते हैं, तो आपको वास्तव में उनके बीच बराबर स्पेसर जोड़ने की आवश्यकता है:

Item {
    Layout.fillWidth: true
}

यदि आप उस तकनीक का उपयोग करते हैं तो आप शायद RowLayout पर spacing: 0 सेट करना चाहेंगे।

और आप यह सुनिश्चित करने के लिए कस्टमबटन पर एक अंतर्निहित चौड़ाई निर्धारित करना चाहेंगे कि वे बढ़ते नहीं हैं:

    implicitWidth: row.width