Qml में ट्री मैपिंग

एक बार, मेरे एक दोस्त ने पूछा: "मैं qml में पेड़ की संरचना को कैसे प्रदर्शित कर सकता हूं?" मैंने हब पर परिणामी संस्करण को प्रकाशित करने की कोशिश की, लेकिन उस समय मैंने एक आमंत्रण की देखरेख की ... कटौती के तहत, उसी लेख को प्रकाशित करने का दूसरा प्रयास।
उद्देश्य: एक परीक्षण एप्लिकेशन विकसित करना जो Qt क्विक का उपयोग करके एक ट्री संरचना प्रदर्शित करता है।
परिणाम GitHub: github.com/1KoT1/QMLPresentTree पर देखा जा सकता है

अनुप्रयोग डेटा संरचना

हमारे आवेदन में, ट्री तत्वों का वर्णन ट्रीइइटेम वर्ग द्वारा किया गया है।



सामग्री गुण कुछ तत्व सामग्री रखता है। परीक्षण आवेदन के लिए, एक पंक्ति ठीक है।
किसी तत्व के प्रत्येक उदाहरण में निहित सबलेमेंट्स की एक सूची होती है - बच्चे। इस तरह से एक पेड़ बनाया जाता है।
IsOpen प्रॉपर्टी आंतरिक तत्वों की सूची की स्थिति रखती है: विस्तारित या छिपी हुई।
हैशल्ड प्रॉपर्टी इंगित करती है कि क्या कोई बच्चे हैं। एक का उपयोग कर के आसपास हो सकता है! Item.childItems ()। IsEmpty (), लेकिन आगे के उपयोग में आसानी के लिए, उन्होंने हैशल्ड फ़ील्ड की शुरुआत की।
उस कोड को देखें जो इस वर्ग को पेड़ - पौधों में लागू करता है । h और treeitem.cpp ।
Model.h और model.cpp एप्लिकेशन डेटा मॉडल का वर्णन करते हैं। मॉडल में एक एकल गुण होता है - तत्वों का पेड़।
Main.cpp में, मॉडल बनाएं, मॉडल को qml में देखें और निर्यात करें। कोई नियंत्रक नहीं है, क्योंकि प्रदर्शन के अलावा कोई कार्यक्षमता नहीं है।

Qml में ट्री मैपिंग

अब हम सबसे दिलचस्प से गुजरते हैं। हम qml का उपयोग करके अपने पेड़ की संरचना के मानचित्रण का वर्णन करते हैं।
मुख्य qml फ़ाइल में निम्न कोड है:

import QtQuick 2.0 Rectangle { width: 360 height: 360 ListView{ anchors.fill: parent model: programmModel.tree delegate: ItemView{} } } 

मूल विचार इस प्रकार है: हम पहले स्तर के तत्वों की एक फ्लैट सूची प्रदर्शित करते हैं। आइटम का वर्णन करने वाले प्रतिनिधि को उप-आइटम प्रदर्शित करने के लिए एक फ्लैट सूची होती है। आदि वृक्ष की संरचना द्वारा।

विंडो पूरी तरह से ListView से भरी हुई है। ListView एक फ्लैट सूची प्रदर्शित करता है और आपको इसके माध्यम से स्क्रॉल करने की अनुमति देता है। मैं हमारे पेड़ को एक मॉडल के रूप में इंगित करता हूं। वास्तव में, यह तत्वों की एक फ्लैट सूची है, जिनमें से प्रत्येक में उप-तत्वों की एक सूची शामिल है। प्रत्येक आइटम का प्रदर्शन ItemView.qml में वर्णित है:

 import QtQuick 2.0 Row{ id: itemView Text{ width: 10 height: 10 text: modelData.hasChild? modelData.isOpen ? "-" : "+" : "" MouseArea{ anchors.fill: parent onClicked: modelData.isOpen = !modelData.isOpen; } } Column{ Text{ text: modelData.content } Loader{ source: modelData.isOpen ? "TreeItemsList.qml" : "Empty.qml" } } } 

एक तत्व में आउटपुट सामग्री होती है:

 Text{ text: modelData.content } 

एक नियंत्रण जो उप-तत्वों की उपस्थिति को दर्शाता है और आपको सूची का विस्तार करने की अनुमति देता है:

 Text{ width: 10 height: 10 text: modelData.hasChild? modelData.isOpen ? "-" : "+" : "" MouseArea{ anchors.fill: parent onClicked: modelData.isOpen = !modelData.isOpen; } } 

घबराहट की सूची:

 Loader{ source: modelData.isOpen ? "TreeItemsList.qml" : "Empty.qml" } 

उप-तत्वों की सूची केवल तब प्रदर्शित होनी चाहिए जब यह खुला हो। ऐसा करने के लिए, लोडर तत्व का उपयोग करें। बंद होने पर, Empty.qml इसमें लोड किया जाता है - आकार 0 से 0. आयत। उप-तत्वों की एक खुली सूची का प्रदर्शन TreeItemsList.qml में वर्णित है।

इस पर विचार करें:

 import QtQuick 2.0 Column{ Repeater{ model: modelData.childItems delegate: ItemView{} } } 

स्तंभ और पुनरावर्तक तत्वों के संयोजन का उपयोग करके एक ऊर्ध्वाधर सूची का निर्माण होता है। ListView के विपरीत, कॉलम स्क्रॉलिंग सामग्री की अनुमति नहीं देता है और आंतरिक तत्वों को प्रदर्शित करने के लिए सभी आवश्यक स्थान लेता है। मुख्य फ़ाइल में ListView का उपयोग करके पूरे पेड़ को स्क्रॉल किया जाता है।

उप-तत्वों को प्रदर्शित करने के लिए, उसी डलगॉट का उपयोग शीर्ष-स्तरीय सूची में किया जाता है। इस प्रकार, प्रत्येक तत्व अपने तत्वों को प्रदर्शित कर सकता है। नेस्टिंग केवल सिस्टम संसाधनों द्वारा सीमित है।

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