QML में लोडर का उपयोग करना

शुभ दोपहर इस लेख में मैं लोडर के रूप में क्यूएमएल से ऐसे घटक के बारे में बात करूंगा।

यह आपको एक कंटेनर बनाने की अनुमति देता है जिसमें आप आवश्यक क्यूएमएल तत्व संलग्न कर सकते हैं, कार्यक्रम की स्थिति के आधार पर विभिन्न तत्वों का उपयोग कर सकते हैं, और मांग पर और संसाधनों को बचाने के लिए शायद ही कभी उपयोग किए जाने वाले भागों को डाउनलोड करने योग्य बनाते हैं। लोडर QML घटक के लिए एक कंटेनर है और स्वयं द्वारा प्रदर्शित नहीं किया जाता है।

मैं QtQuick 2.0 के एक घटक पर विचार कर रहा हूं जो Qt पांचवें संस्करण में शामिल है। पहले के संस्करण में, यह घटक भी है, लेकिन कार्यक्षमता थोड़ी कम है।

लोडर के लिए सामग्री सेट करना

लोडर की सामग्री के रूप में, आप या तो पथ को qml-file या घटक पर सेट कर सकते हैं। इन तरीकों पर अधिक विस्तार से विचार करें।

1. qml फ़ाइल का पथ

स्रोत पैरामीटर के माध्यम से पथ निर्दिष्ट किया गया है। यह या तो स्थानीय फ़ाइल या नेटवर्क से फ़ाइल url का पथ हो सकता है। मार्ग भी पूर्ण और सापेक्ष दोनों हो सकते हैं।

एक उदाहरण पर विचार करें जो विंडो क्षेत्र में माउस पर क्लिक करके पृष्ठभूमि को बदलता है।

main.qml:

import QtQuick 2.0 Item { id: main property int backgroundNumber: 1 width: 360 height: 360 Loader { id: background anchors.fill: parent source: "Background_1.qml" } MouseArea { anchors.fill: parent onClicked: { background.source = (backgroundNumber == 1 ? "Background_2.qml" : "Background_1.qml") backgroundNumber = (backgroundNumber == 1 ? 2 : 1) } } } 

Background_1.qml

 import QtQuick 2.0 Rectangle { color: "black" } 

Background_2 .qml:

 import QtQuick 2.0 Rectangle { color: "yellow" } 

इस विधि का एक फायदा है। Qml घटक से ऑब्जेक्ट बनाने से पहले, qml इंजन को पहले इसे संकलित करना होगा। यदि हम स्रोत स्थापित नहीं करते हैं, तो कुछ भी संकलित नहीं किया जाएगा, क्रमशः उन वस्तुओं के लिए जिन्हें हमेशा ज़रूरत नहीं होती है और डिफ़ॉल्ट रूप से नहीं बनाई जाती हैं, यह विधि सबसे उपयुक्त है।

2. घटक

आप लोडर के दायरे में एक घटक को परिभाषित कर सकते हैं और इसे sourceComponent संपत्ति के रूप में निर्दिष्ट कर सकते हैं। चूंकि हम एक घटक को परिभाषित करते हैं, क्यूएमएल इंजन इसे संकलित करता है, भले ही हमने कार्यक्रम की पूरी अवधि के लिए इससे कोई वस्तु कभी नहीं बनाई हो, जो कि एक खामी है। उसी समय, चूंकि घटक पहले से ही संकलित है, आपको केवल एक ऑब्जेक्ट बनाने की आवश्यकता है, जो तेज है। यदि आपको अक्सर विभिन्न घटकों के बीच राज्यों को स्विच करने की आवश्यकता होती है, तो यह विधि अच्छी तरह से अनुकूल है। उसी समय, घटक फ़ाइल डाउनलोड करने की कोई आवश्यकता नहीं है, जो घटक को डिस्क पर स्थानीय फ़ाइल से डाउनलोड नहीं किए जाने पर, लेकिन नेटवर्क से डाउनलोड किए जाने पर एक और मूर्त लाभ हो सकता है।

एक अन्य विशेषता यह है कि घटक को दिए गए qml-file के संदर्भ में परिभाषित किया गया है, जिसका अर्थ है कि फ़ाइल की सामग्री भी दिखाई देगी और यह इस फ़ाइल से वस्तुओं के गुणों और कार्यों तक पहुंच सकती है।

main.qml:

 import QtQuick 2.0 Item { id: main property int backgroundNumber: 1 property color backgroundColor1: "black" property color backgroundColor2: "yellow" width: 360 height: 360 Loader { id: background anchors.fill: parent sourceComponent: background_1 } MouseArea { anchors.fill: parent onClicked: { background.sourceComponent = (backgroundNumber == 1 ? background_2 : background_1) backgroundNumber = (backgroundNumber == 1 ? 2 : 1) } } Component { id: background_1 Rectangle { color: main.backgroundColor1 } } Component { id: background_2 Rectangle { color: main.backgroundColor2 } } } 

इस उदाहरण में, मूल घटक (मुख्य) और उसके गुण पृष्ठभूमि 1 और पृष्ठभूमि 2 घटकों से दिखाई देते हैं।

3. सेटसोर्स ()

क्यूएमएल में एक वस्तु का वर्णन करते समय, आप इसके प्रारंभिक पैरामीटर सेट कर सकते हैं, साथ ही बाइंडिंग का उपयोग कर सकते हैं। उपरोक्त दो तरीकों से लोडर का उपयोग करते हुए एक घटक को लोड करते समय, यह नहीं किया जा सकता है।

QtQuick 2.0 (Qt 5.0) ने सेटसोर्स विधि पेश की। यह आपको बनाई गई वस्तु के गुणों को निर्धारित करने की अनुमति देता है। ऐसा करने के लिए, आपको फ़ंक्शन के दूसरे तर्क के रूप में आवश्यक पैरामीटर के साथ एक नियमित जावास्क्रिप्ट ऑब्जेक्ट पास करना होगा।

एक उदाहरण के रूप में, अस्पष्टता सेट करें, अर्थात। पारदर्शिता (अधिक सटीक, अस्पष्टता)।

main.qml:

 import QtQuick 2.0 Item { id: main property int backgroundNumber: 1 width: 360 height: 360 Loader { id: background anchors.fill: parent Component.onCompleted: setSource("Background_1.qml", { "opacity": 0.5 }) } MouseArea { anchors.fill: parent onClicked: { background.setSource(backgroundNumber == 1 ? "Background_2.qml" : "Background_1.qml", { "opacity": 0.5 }) backgroundNumber = (backgroundNumber == 1 ? 2 : 1) } } } 

तुल्यकालिक और अतुल्यकालिक लोडिंग

डिफ़ॉल्ट रूप से, घटक जो डिस्क पर स्थानीय फ़ाइल पथ के स्रोत पथ के रूप में सेट किए जाते हैं, उन्हें सिंक्रोनाइज़ किया जाता है। यदि आप नेटवर्क से फ़ाइल url निर्दिष्ट करते हैं, तो स्थिति लोडर में बदल जाती है। लोड करना और डाउनलोड करना अतुल्यकालिक है।

अतुल्यकालिक बूट मोड को भी सच में अतुल्यकालिक संपत्ति सेट करके मैन्युअल रूप से सक्रिय किया जा सकता है।

यदि डाउनलोड समय महत्वपूर्ण हो सकता है, तो डाउनलोड प्रगति के बारे में जानकारी काम में आ सकती है। प्रगति संपत्ति प्रदर्शित करेगी कि घटक कितना लोड है (0 से 1 तक)।

ऑब्जेक्ट एक्सेस

बनाई गई वस्तु को आइटम संपत्ति का उपयोग करके एक्सेस किया जा सकता है। इस प्रकार, आप ऑब्जेक्ट के गुणों तक पहुंच सकते हैं (यदि सेटसोर्स का उपयोग करके ऑब्जेक्ट नहीं बनाया गया था, तो यह ऑब्जेक्ट के लिए वांछित गुणों को सेट करने का एकमात्र तरीका है)।

आप न केवल किसी ऑब्जेक्ट के लिए गुण सेट कर सकते हैं, बल्कि हैंडलर को उसके संकेतों से जोड़ सकते हैं और उसके तरीकों को कॉल कर सकते हैं। केवल एक चीज घटक को लोड करने के लिए इंतजार करना है। आपको तब तक इंतजार करना होगा जब तक कि स्थिति पैरामीटर लोडर के बराबर नहीं हो जाता है। लोड सिग्नल पर हैंडलर को रखें या हैंडलर लगाएं।

एक छोटे से उदाहरण पर विचार करें।

main.qml:

 import QtQuick 2.0 Item { id: main width: 360 height: 360 Loader { id: background anchors.fill: parent asynchronous: true source: "Background_1.qml" onStatusChanged: console.log("status", status, "item", item) onLoaded: item.color = "green" } } 

यहाँ हमें आउटपुट के रूप में मिलता है:
status 2 item null
status 2 item null
status 1 item QQuickRectangle(0x95436f8)

नंबर 2 लोडर के मान से मेल खाता है। लोडिंग, 1 - लोडर।रेड्डी। आप उस वस्तु को बनाए गए ऑब्जेक्ट की ओर भी देख सकते हैं जब ऑब्जेक्ट का लोडिंग पूरा हो गया था। डाउनलोड पूरा होने के बाद, पृष्ठभूमि का रंग हरा हो जाएगा।

संकेतों के साथ काम करें

हैंडलर को लोडर में लोड की गई वस्तु के सिग्नल पर सेट करने के लिए, आपको इस सिग्नल पर कनेक्ट () विधि को कॉल करना होगा और हैंडलर फ़ंक्शन को एक पैरामीटर के रूप में पास करना होगा। हैंडलर को संबंधित डिस्कनेक्ट () विधि का उपयोग करके हटाया जा सकता है।

एक उदाहरण पर विचार करें।

main.qml:

 import QtQuick 2.0 Item { id: main width: 360 height: 360 Loader { id: container anchors.fill: parent source: "Mouse.qml" onLoaded: item.mouseClicked.connect(processMouse) Component.onDestruction: { if (item) { item.mouseClicked.disconnect(processMouse) } } } function processMouse() { console.log("mouse clicked!") } } 

Mouse.qml:

 import QtQuick 2.0 Item { id: m signal mouseClicked() MouseArea { anchors.fill: parent onClicked: m.mouseClicked() } } 

कंसोल में विंडो पर क्लिक करके टेक्स्ट प्रदर्शित होगा: "माउस क्लिक!"

यह विधि शक्तिशाली है और आपको प्रोग्राम की स्थिति के आधार पर हैंडलर सेट / निकालने की अनुमति देती है। इसके लिए कीमत बढ़ती जटिलता, कोड की मात्रा और कम विश्वसनीयता है। जब संकेतों का मैनुअल नियंत्रण आवश्यक नहीं है, तो हम कनेक्शंस qml घटक का उपयोग कर सकते हैं। लक्ष्य संपत्ति के रूप में, हम आइटम निर्दिष्ट करते हैं और हैंडलर सेट करते हैं जैसे कि हमने उन्हें तत्व में ही परिभाषित किया है।

main.qml:

 import QtQuick 2.0 Item { id: main width: 360 height: 360 Loader { id: container anchors.fill: parent source: "Mouse.qml" } Connections { target: container.item onMouseClicked: processMouse() } function processMouse() { console.log("mouse clicked!") } } 

जैसा कि आप देख सकते हैं, यह विधि सरल, अधिक सुविधाजनक और त्रुटियों के लिए कम प्रवण है। इसके अलावा, इस विधि को एक घोषणात्मक शैली में बनाया गया है और यह अनिवार्य है कि जब हम मैन्युअल रूप से संबंधित हैंडलर के साथ संकेतों को जोड़ते हैं, तो qml के लिए अधिक स्वाभाविक है।

घोषणात्मक और अनिवार्य दृष्टिकोण के बारे में

उपरोक्त उदाहरणों में विशेष रूप से कुछ भी जटिल नहीं है, लेकिन यदि आपको उन वस्तुओं को जोड़ने की आवश्यकता है जो अतुल्यकालिक रूप से लोड करते हैं, तो यह nontrivial हो सकता है। आपको यह उम्मीद नहीं करनी चाहिए कि qml इंजन उन्हें किसी विशेष अनुक्रम में लोड करता है, खासकर यदि वे नेटवर्क पर डाउनलोड किए जाते हैं।

अनुभव से, यदि घोषित तरीकों का उपयोग करना संभव है, तो उनका उपयोग करना बेहतर है। यह न केवल संकेतों पर लागू होता है, बल्कि उन वस्तुओं के गुणों के लिए भी होता है, जो सेटसोर्स का उपयोग करके सेट किए जा सकते हैं, बजाय इसके कि वे घटक को लोड करने के लिए प्रतीक्षा करें और मैन्युअल रूप से उन्हें आइटम संपत्ति के माध्यम से सेट करें (क्यूटी में इस विधि का कोई चौथा संस्करण नहीं है, यह केवल वहां है)।

गैर-दृश्य आइटम डाउनलोड करना

QtQuick 2.0 में, लोडर ने न केवल दृश्य तत्वों को लोड करने की क्षमता जोड़ी। उदाहरण के लिए, आप QtObject के आधार पर एक तत्व को इस तरह से लोड कर सकते हैं।

main.qml:

 import QtQuick 2.0 Item { id: main width: 360 height: 360 Loader { id: container anchors.fill: parent source: "Element.qml" onLoaded: console.log(item.text) } } 

Element.qml:

 import QtQuick 2.0 QtObject { property string text: "hello!" } 

बूट करते समय, "हैलो!" कंसोल में प्रदर्शित होगा।

एक छोटा सारांश

लोडर दोनों अन्य फ़ाइलों से qml घटकों को लोड कर सकता है, और वर्तमान qml फ़ाइल के क्षेत्र में परिभाषित घटकों का उपयोग कर सकता है। चुनी गई विधि के आधार पर, एक बार निर्माण प्रक्रिया के हिस्से के निष्पादन को स्थगित करना संभव है और इस तरह वस्तुओं के निर्माण को गति प्रदान करना, या किसी ऑब्जेक्ट को बनाने के लिए सभी ऑपरेशनों को स्थगित करना जब तक कि इसकी आवश्यकता न हो।

इस तथ्य के बावजूद कि qml एक घोषित भाषा है, कई चीजें अनिवार्य रूप से करना संभव है, जो कुछ स्थितियों में उपयोगी साबित हो सकती हैं, हालांकि कुछ जटिलता की कीमत पर और कोड की मात्रा में वृद्धि। क्यूटी के नवीनतम संस्करण के मामले में नहीं, यह विधि पुस्तकालय की सीमाओं को बायपास करने में मदद कर सकती है।