मैं क्या करने की कोशिश कर रहा हूं:

enter image description here

मेरे पास एक रोलेयर है जहां मैंने 3 कस्टम बटन जोड़े हैं, लेकिन किसी कारण से, मैं उनके बीच एक समान रिक्ति प्राप्त नहीं कर सकता, और मुझे यकीन नहीं है कि मैं रोलेयर पक्ष में कुछ गलत कर रहा हूं या एक कस्टम के कार्यान्वयन बटन किसी भी कारण से गलत है।

मेरा लेआउट

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

मेरा कस्टम बटन

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()
    }
}
0
Mircea 29 अप्रैल 2020, 19:56

3 जवाब

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

0
MK MarineBoy 29 अप्रैल 2020, 20:05
उससे तुम्हारा क्या मतलब है? मतलब width: row.width में कोई समस्या है? और क्या? मैं सोच रहा था कि row.width का आकार उस iconID.width + textID.width के बराबर है, या क्या मैं यह गलत कर रहा हूं?
 – 
Mircea
29 अप्रैल 2020, 22:22

आप चौड़ाई संपत्ति को 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
            }
        }
    }
}
0
cppiscute 29 अप्रैल 2020, 23:08

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

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

Item {
    Layout.fillWidth: true
}

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

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

    implicitWidth: row.width
0
David K. Hess 30 अप्रैल 2020, 00:57