क्यूएमएल में बाल प्लेसहोल्डर्स के साथ "टेम्पलेट" को कैसे परिभाषित किया जाए?

Question

मुझे वास्तव में क्यूएमएल पसंद है। मुझे पसंद है कि मैं घटकों को परिभाषित कर सकता हूं (कक्षाओं के तुलनीय) और उनके गुण, और उन्हें कहीं और (वस्तुओं के तुलनीय) से तुरंत चालू कर सकते हैं।

मैं परिभाषित कर सकता हूं, एक बटन, कुछ दिखने और महसूस करने और उस पर एक लेबल टेक्स्ट परिभाषित कर सकता हूं। ऐसा इसलिए किया जाता जा सकता है, उदाहरण के लिए, इस घटक परिभाषा (Button.qml) का उपयोग:

Item { 
    id: button 
    property string label 

    anchors.fill: parent 

    Rectangle { 
     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     Text { 
      anchors.centerIn: parent 
      font.pixelSize: 20 
      text: button.label 
      color: "white" 
     } 
    } 
} 

और instanciated यह मुख्य फ़ाइल में (main.qml):

Rectangle { 
    width: 300 
    height: 200 

    Button { 
     anchors.centerIn: parent 
     anchors.margins: 50 
     label: "Hello button!" 
    } 
} 

लेकिन मैं निम्नलिखित प्रतिबंध देखें: मैं केवल यह कर सकते हैं कुछ गुण के साथ एक बटन टेम्पलेट परिभाषित करें, कुछ प्लेसहोल्डर के साथ नहीं। उदाहरण में परिभाषित सभी बच्चे प्रत्यक्ष बच्चे होंगे, कम से कम प्रति डिफ़ॉल्ट, और मैं इस व्यवहार को बदलना चाहता हूं।

मान लें कि मैं एक आइटम रखना चाहता हूं (चलो एक छवि कहें, लेकिन मैं Button की परिभाषा बताना नहीं चाहता कि यह एक छवि होगी)। मुझे कुछ ऐसा लगता है:

Item { 
    id: button 
    property Item contents <-- the client can set the placeholder content here 

    anchors.fill: parent 

    Rectangle { 
     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     Item { 
      id: placeholder  <-- where the placeholder should be inserted 
     } 
    } 

    Component.onCompleted: { 
     // move the contents into the placeholder... 
    } 
} 

मैं इसे कैसे प्राप्त कर सकता हूं? मुझे नहीं पता कि Component.onCompleted का उपयोग सही तरीका है या नहीं। ध्यान दें कि, हालांकि, मेरे मामले में सामग्री बाद में कभी नहीं बदलेगी (कम से कम आवेदन के मेरे वर्तमान डिजाइन में ...)।

इसके अलावा, मैं प्लेसहोल्डर के भीतर काम करने के लिए एंकरिंग करना चाहता हूं। उदाहरण के लिए, यदि मैं सामग्री को टेक्स्ट तत्व के रूप में परिभाषित करता हूं, तो उसके माता-पिता में केंद्रित होता है (जो पहले टेम्पलेट स्वयं होगा)। फिर मेरा कोड प्लेसहोल्डर को प्लेसहोल्डर में ले जाता है और पैरेंट एंकर को प्लेसहोल्डर आइटम के रूप में होना चाहिए, न कि टेम्पलेट आइटम।

Answer 1

मैंने पाया एक बहुत अच्छे क्यूटी डेवलपर दिवस 2011 "Qt Quick Best Practices and Design Patterns" की प्रस्तुति में सुझाए गए इस प्रश्न का उत्तर।

वे default property alias ...उर्फ ​​ किसी आइटम की किसी भी संपत्ति के लिए बच्चे के आइटम का उपयोग करते हैं। यदि आप बच्चों को उपनाम नहीं करना चाहते हैं, लेकिन उपनाम संपत्ति को एक नाम दें, तो बस default हटा दें। (शाब्दिक बच्चों प्रति QML परिभाषा डिफ़ॉल्ट संपत्ति का मूल्य है।)

Item { 
    id: button 
    default property alias contents: placeholder.children 

    anchors.fill: parent 

    Rectangle { 
     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     Item { 
      id: placeholder  <-- where the placeholder should be inserted 
     } 
    } 
} 

Answer 2

दरअसल, जो मैंने सुना है उससे सही उत्तर QML Loader का उपयोग करना चाहते हैं जो आप चाहते हैं।

[कहा जा रहा है; मैंने वास्तव में अभी तक यह कोशिश नहीं की है, लेकिन यह मेरी निकट अवधि की कोशिश सूची में है और काफी सीधे आगे दिखता है]

इसके अलावा, अन्य "QML Loader" प्रश्नों के लिए स्टैक ओवरफ्लो खोजें क्योंकि वहां एक संख्या है जो आपको प्रारंभ करने में मदद करेगी।

Answer 3

आप आइटम (रों) स्थानांतरित कर सकते हैं कोड के इस टुकड़े का उपयोग कर (आप प्लेसहोल्डर के भीतर कई आइटम का समर्थन करना चाहते हैं):

property list<Item> contents 

Component.onCompleted: { 
    var contentItems = []; 
    for(var i = 0; i < contents.length; ++i) 
     contentItems.push(contents[i]); 
    placeholder.children = contentItems; 
} 

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

Answer 4

संक्षेप में (विचार को दिखाने के लिए):

import QtQuick 1.1 

Item { 
    width: 200 
    height: 100 

    //<-- the client can set the placeholder content here 
    property Item contents: Rectangle { 
     anchors.fill: parent 
     anchors.margins: 25 
     color: "red" 
    } 

    Rectangle { 
     id: container 

     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     //<-- where the placeholder should be inserted 
    } 

    Component.onCompleted: { 
     contents.parent = container 
    } 
} 

कुछ हद तक लंबे समय तक संस्करण (समर्थन सामग्री रीअसाइनमेंट):

import QtQuick 1.1 

Item { 
    width: 200 
    height: 100 

    //<-- the client can set the placeholder content here 
    property Item contents: Rectangle { 
     //anchors can be "presupplied", or set within the insertion code 
     //anchors.fill: parent 
     //anchors.margins: 25 
     color: "red" 
    } 

    Rectangle { 
     id: container 

     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     //<-- where the placeholder should be inserted 
     //Item { 
     // id: placeholder 
     //} 
    } 

    //"__" means private by QML convention 
    function __insertContents() { 
     // move the contents into the placeholder... 
     contents.parent = container 
     contents.anchors.fill = container 
     contents.anchors.margins = 25 
    } 

    onContentsChanged: { 
     if (contents !== null) 
      __insertContents() 
    } 

    Component.onCompleted: { 
     __insertContents() 
    } 
} 

आशा इस मदद करता है :)

Answer 5

Necro जवाब मामले में किसी और यहाँ अंत के रूप में मैंने किया था।

क्यूटी 5 में लाइन के साथ कहीं भी डिफ़ॉल्ट संपत्ति "data" और "बच्चों" नहीं बन गई। इससे "आइटम" की तुलना में अन्य ऑब्जेक्ट प्रकारों को जोड़ना संभव हो जाता है। उदा।

Item { 
    id: button 
    default property alias contents: placeholder.data 

    anchors.fill: parent 

    Rectangle { 
     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     Item { 
      id: placeholder  <-- where the placeholder should be inserted 
     } 
    } 
} 

नोट:: placeholder.dataplaceholder.children के बजाय यह भी ध्यान रखें कृपया आप की जरूरत नहीं है कि कनेक्शन के साथ-साथ

तो Qt5 में आपको क्या करना चाहिए (ऊपर अपने ही सवाल का जवाब देने) जोड़ा जा सकता है उपनाम का नाम contents का उपयोग करने के लिए - यह आपकी पसंद की कुछ भी हो सकती है। एक उदाहरण:

Item { 
    id: button 
    default property alias foo: placeholder.data 
    ... 

}