Qt 5.11 - QML Coding Conventions

QML कोडिंग कन्वेंशन




qt

QML कोडिंग कन्वेंशन

इस दस्तावेज़ में QML कोडिंग कन्वेंशन हैं जो हम अपने दस्तावेज़ और उदाहरणों में अनुसरण करते हैं और अनुशंसा करते हैं कि अन्य का पालन करें।

QML ऑब्जेक्ट घोषणाएँ

हमारे दस्तावेज़ और उदाहरणों के दौरान, QML ऑब्जेक्ट विशेषताएँ हमेशा निम्न क्रम में संरचित होती हैं:

  • आईडी
  • संपत्ति की घोषणा
  • संकेत की घोषणा
  • जावास्क्रिप्ट कार्य करता है
  • वस्तु गुण
  • बच्चे वस्तुओं
  • राज्यों
  • संक्रमण

बेहतर पठनीयता के लिए, हम इन विभिन्न भागों को एक खाली रेखा के साथ अलग करते हैं।

उदाहरण के लिए, एक काल्पनिक फोटो QML ऑब्जेक्ट इस तरह दिखेगा:

Rectangle {
    id: photo                                               // id on the first line makes it easy to find an object

    property bool thumbnail: false                          // property declarations
    property alias image: photoImage.source

    signal clicked                                          // signal declarations

    function doSomething(x)                                 // javascript functions
    {
        return x + photoImage.width
    }

    color: "gray"                                           // object properties
    x: 20; y: 20; height: 150                               // try to group related properties together
    width: {                                                // large bindings
        if (photoImage.width > 200) {
            photoImage.width;
        } else {
            200;
        }
    }

    Rectangle {                                             // child objects
        id: border
        anchors.centerIn: parent; color: "white"

        Image { id: photoImage; anchors.centerIn: parent }
    }

    states: State {                                         // states
        name: "selected"
        PropertyChanges { target: border; color: "red" }
    }

    transitions: Transition {                               // transitions
        from: ""; to: "selected"
        ColorAnimation { target: border; duration: 200 }
    }
}

समूहीकृत गुण

यदि गुणों के समूह से कई गुणों का उपयोग किया जाता है, तो पठनीयता में सुधार होने पर डॉट नोटेशन के बजाय समूह संकेतन का उपयोग करने पर विचार करें।

उदाहरण के लिए, यह:

Rectangle {
    anchors.left: parent.left; anchors.top: parent.top; anchors.right: parent.right; anchors.leftMargin: 20
}

Text {
    text: "hello"
    font.bold: true; font.italic: true; font.pixelSize: 20; font.capitalization: Font.AllUppercase
}

इस तरह लिखा जा सकता है:

Rectangle {
    anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 }
}

Text {
    text: "hello"
    font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase }
}

सूचियाँ

यदि किसी सूची में केवल एक तत्व होता है, तो हम आम तौर पर वर्ग कोष्ठक को छोड़ देते हैं।

उदाहरण के लिए, केवल एक राज्य के लिए एक घटक के लिए यह बहुत सामान्य है।

इस मामले में, के बजाय:

states: [
    State {
        name: "open"
        PropertyChanges { target: container; width: 200 }
    }
]

हम इसे लिखेंगे:

states: State {
    name: "open"
    PropertyChanges { target: container; width: 200 }
}

जावास्क्रिप्ट कोड

यदि स्क्रिप्ट एक एकल अभिव्यक्ति है, तो हम इसे इनलाइन लिखने की सलाह देते हैं:

Rectangle { color: "blue"; width: parent.width / 3 }

यदि स्क्रिप्ट केवल कुछ लंबी लाइनें है, तो हम आम तौर पर एक ब्लॉक का उपयोग करते हैं:

Rectangle {
    color: "blue"
    width: {
        var w = parent.width / 3
        console.debug(w)
        return w
    }
}

यदि स्क्रिप्ट कुछ पंक्तियों से अधिक लंबी है या विभिन्न वस्तुओं द्वारा उपयोग की जा सकती है, तो हम एक फ़ंक्शन बनाने और इसे इस तरह से कॉल करने की सलाह देते हैं:

function calculateWidth(object)
{
    var w = object.width / 3
    // ...
    // more javascript code
    // ...
    console.debug(w)
    return w
}

Rectangle { color: "blue"; width: calculateWidth(parent) }

लंबी स्क्रिप्ट के लिए, हम अपनी स्वयं की जावास्क्रिप्ट फ़ाइल में फ़ंक्शन डालेंगे और इसे इस तरह से आयात करेंगे:

import "myscript.js" as Script

Rectangle { color: "blue"; width: Script.calculateWidth(parent) }

यदि कोड एक पंक्ति से अधिक लंबा है और इसलिए एक ब्लॉक के भीतर, हम प्रत्येक कथन के अंत का संकेत देने के लिए अर्धविराम का उपयोग करते हैं:

MouseArea {
    anchors.fill: parent
    onClicked: {
        var scenePos = mapToItem(null, mouseX, mouseY);
        console.log("MouseArea was clicked at scene pos " + scenePos);
    }
}