QML एक घटक खींचें जैसे कि वह शीर्ष स्टैकिंग क्रम (सबसे बड़ा जेड)

Question

QT5.5, QML है:

मैं उदाहरण के लिए "Qt Quick Examples - Drag and Drop" उपयोग कर रहा हूँ इस उदाहरण में, आप देख सकते हैं कि हम खींचें अगर लाल टाइल "1", जब हम इसे खींचते हैं तो यह अन्य टाइल्स के नीचे दिखाई देता है।

मैं इस प्रभाव पसंद नहीं के बाद से, जब हम एक आइटम खींचते हैं, मुझे आशा है कि यह हमेशा पूरी जीयूआई के शीर्ष पर दिखाई देता है।

मैं क्या करने की कोशिश की है: एक बार माउस दबाया जाता है, हम सबसे बड़ा मूल्य के रूप में आइटम की जेड निर्धारित किया है। और जब माउस जारी किया गया है, छोटे मूल्य के लिए जेड सेट (या बेहतर हम मूल मान बचाने के लिए और इसे वापस रीसेट अपने मूल valule सकता है)

MouseArea { 
     id: mouseArea 

     width: 64; height: 64 
     anchors.centerIn: parent 

     drag.target: tile 

     onPressed: { 
      tile.z = 100; 
     } 
     onReleased: { 
      tile.z = 0; 
      parent = tile.Drag.target !== null ? tile.Drag.target : root 
     } 
} 

लेकिन कोड काम नहीं करता। असल में console.log का उपयोग करके, मैं z मूल्य परिवर्तन देख सकते हैं, लेकिन खींच भूत छवि अभी भी निचले भाग में दिखाई देता है। तो मैं जब onPressed कार्यान्वित किया जाता है, खींचें तंत्र अपने मूल z मान का उपयोग किया और अद्यतन z मूल्य तक पहुँचने के लिए कोई मौका नहीं हो जाता है लगता है।

तो किसी भी विचार के लिए एक अधिक सभ्य खींचें आंदोलन के लिए?

धन्यवाद!

Answer 1

मदों की z मूल्य केवल भाई बहन पर लागू होता है और तत्काल (प्रत्यक्ष) माता-पिता: एक उच्च स्टैकिंग मूल्य के साथ

आइटम एक निचले क्रम stacking के साथ भाई बहनों में सबसे ऊपर बनाए जाते हैं। उसी स्टैकिंग मान वाले आइटम नीचे दिखाई देने वाले क्रम में नीचे खींचे जाते हैं। नकारात्मक स्टैकिंग मान वाले आइटम उनके माता-पिता की सामग्री के अंतर्गत खींचे जाते हैं।

के माता पिता/बच्चे परिदृश्य का परीक्षण करने के लिए एक छोटा सा उदाहरण देखें:

import QtQuick 2.3 
import QtQuick.Window 2.0 

Window { 
    visible: true 
    width: 200 
    height: 200 
    title: qsTr("Hello World") 
    flags: Qt.FramelessWindowHint 

    Rectangle { 
     color: "salmon" 
     width: 64 
     height: 64 
     anchors.centerIn: parent 

     Text { 
      text: "1" 
     } 

     Rectangle { 
      color: "steelblue" 
      x: 32 
      y: 32 
      width: 64 
      height: 64 

      Text { 
       text: "2" 
      } 

      Rectangle { 
       color: "orchid" 
       x: 16 
       y: -16 
       width: 64 
       height: 64 
       z: -2 

       Text { 
        text: "3" 
       } 
      } 
     } 
    } 
} 

हम तीसरे Rectangle -2 के z मूल्य निर्धारित करते हैं, उम्मीद है कि इसके पीछे जाना होगा पहला, लेकिन चूंकि यह दूसरे का बच्चा है और पहले नहीं, यह पहुंच से बाहर है। आइटम में अंतराल ancestory के मामले में कर रहे हैं: यह वही है खींचें में हो रहा है और उदाहरण ड्रॉप है।

इस पर आगे विस्तार से बता दें की Drag and Drop उदाहरण से DragTile.qml लेने के लिए और तुम्हारा करने के लिए एक समान तरीके से इसे संशोधित (यह एक ही बात को प्राप्त करने का एक अच्छा तरीका है, वैसे है) करते हैं:

states: State { 
    when: mouseArea.drag.active 
    ParentChange { target: tile; parent: root } 
    AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined } 
    PropertyChanges { 
     target: tile 
     z: 100 
    } 
} 

यह भी काम नहीं करेगा। यह देखने के लिए कि क्या हो रहा है, हम QSG_VISUALIZE नामक एक अद्भुत छोटे पर्यावरण चर का उपयोग कर सकते हैं। विशेष रूप से, हम overdraw विज़ुअलाइजेशन का उपयोग करना चाहते हैं, जो हमें हमारे दृश्य युक्त एक अच्छा घुमावदार 3 डी बॉक्स देता है। ऊपर हमारे PropertyChanges के साथ भी, आप देख सकते हैं कि आइटम की स्टैकिंग क्रम में कोई बदलाव नहीं है:

सुनिश्चित करने के लिए है कि आइटम सब कुछ के शीर्ष पर प्रदान की गई है, तो आप एक वस्तु है कि करने के लिए यह माता पिता की जरूरत है वास्तव में सब कुछ से ऊपर।

Item { 
    id: dragContainer 
    anchors.fill: parent 
} 

DragTile घटक है कि कंटेनर के लिए प्रतिनिधि पहुँच देता है के लिए एक संपत्ति जोड़ें:: हम tiles.qml के अंत करने के लिए एक Item जोड़ कर ऐसा कर सकते हैं

property Item dragParent 

फिर, में कंटेनर आवंटित tiles.qml:

delegate: DragTile { colorKey: "red"; dragParent: dragContainer } 

इसके बाद, 0 में ParentChange की parent संपत्ति को संशोधित:

ParentChange { target: tile; parent: dragParent } 

अंतिम परिणाम:

ध्यान दें कि मैं जानबूझकर "वापस" बटन को बाहर रखा गया है, लेकिन अगर आप इसे किसी कारण के लिए भी है कि ऊपर जाना बनाना चाहते थे, तो आप केवल dragContainer पदानुक्रम को ऊपर ले जा सकते हैं।