क्यूएमएल

Question

में समय पिकर मुझे उपयोगकर्ता को एक क्यूएमएल आवेदन के भीतर दिनांक और समय चुनने की संभावना देने की आवश्यकता है। चयन तिथियों के लिए QtQuick नियंत्रण में Calendar है। मुझे उपयोगकर्ता का दिन चुनने के लिए एक समान नियंत्रण नहीं मिला है।

इंटरनेट पर Grog या Harmattan जैसे कुछ उदाहरण हैं। मुझे लगता है कि वे मूल रूप से एकीकृत नहीं हैं और अन्य QtQuick नियंत्रणों की तरह महसूस करते हैं।

क्या कोई मानक दृष्टिकोण है जिसके बारे में मुझे पता नहीं है, अच्छे विकल्प जो मैंने नहीं आए हैं या किसके बारे में सिफारिशें चुननी हैं?

Answer 1

क्यूटी 5.5 के बाद से Qt Quick Enterprise ControlsQt Quick Extras नाम के तहत क्यूटी के सामुदायिक संस्करण में भी उपलब्ध होगा। दूसरों के बीच, Tumbler आपकी आवश्यकताओं के लिए एक व्यवहार्य समाधान लगता है: आप आसानी से दो कॉलम सेट कर सकते हैं, एक घंटे के लिए और एक मिनट के लिए।

आप अभी भी परिपत्र चयन में रुचि रखते हैं (या अपने स्वयं गिलास को लागू करना चाहता है) आप इस तरह अपने खुद के घटक QQuickItem या QQuickPaintedItem से इनहेरिट या PathView साथ एक कस्टम दृश्य का शोषण बनाने के रूप में अलग-अलग मार्गों ले सकता है। उत्तरार्द्ध वह मामला है जिसे मैं इस जवाब में शामिल करने जा रहा हूं। कस्टम घटकों के निर्माण के बारे में उदाहरणों के लिए प्रदान किए गए लिंक देखें।

PathView के प्रलेखन हवाला देते हुए:

दृश्य एक मॉडल है, जो परिभाषित करता है डेटा प्रदर्शित करने के लिए, और एक प्रतिनिधि है, जो परिभाषित करता है कि डेटा प्रदर्शित किया जाना चाहिए है। प्रतिनिधि को पथ पर प्रत्येक आइटम के लिए तत्काल किया जाता है। आइटम पथ के साथ उन्हें स्थानांतरित करने के लिए फिसल जा सकते हैं।

इसलिए पथ एक गोलाकार फैशन में भी स्क्रीन पर रखे गए तरीके को परिभाषित करता है। एक पथ Path प्रकार के माध्यम से बनाया जा सकता है, यानी विभिन्न प्रकार के पथ खंडों का अनुक्रम। PathArc वह है जिसे हम रुचि रखते हैं, क्योंकि यह वांछित गोलाकार आकार प्रदान करता है।

निम्नलिखित उदाहरण गोलाकार समय पिकर को परिभाषित करने के लिए इन तत्वों का उपयोग करता है। प्रत्येक पथ का प्रतिनिधि प्रतिनिधि के currentIndex का शोषण करके बनाया जाता है: घंटे के दृश्य के लिए PathView एस - 12 के लिए मॉडल के रूप में एक पूर्णांक का उपयोग क्रमशः मिनट दृश्य के लिए और 6 के लिए किया जाता है। प्रतिनिधियों का पाठ index संलग्न संपत्ति का शोषण करके और घंटों और 10-मिनट अंतराल मूल्य उत्पन्न करने के लिए इसे जोड़कर उत्पन्न होता है (प्रतिनिधियों को Text आइटम देखें)। अंत में, वर्तमान तत्व का पाठ (यानी currentItem) विंडो के केंद्र में समय लेबल के लिए बाध्य है: currentIndex और currentItem परिवर्तन के रूप में, लेबल भी अपडेट हो जाता है।

समग्र घटक इस तरह दिखता है: को जब दृश्य समय संपादित किया जा सकता यानी एक और Item की:

highlight घटकों (नीला और हरा वृत्त) रेखांकन समय के संपादन का प्रतिनिधित्व करने के लिए उपयोग किया जाता है पथ का चयन किया जा सकता है। सामान्य और संपादन मोड के बीच स्विचिंग केंद्र में समय लेबल पर क्लिक करके होता है।

संपादन मोड में जब उपयोगकर्ता उन्हें चुनने के लिए अलग-अलग घंटों/मिनट मानों को आसानी से घुमा सकता है। यदि नए चयनित घंटे/मिनट को उस विशिष्ट PathView के संपादन के लिए क्लिक किया गया है और संबंधित हाइलाइट सर्कल गायब हो जाता है।

यह कोड स्पष्ट रूप से केवल एक खिलौना उदाहरण है जो आपको PathView का उपयोग करने के लिए उपयोग किया जा सकता है। कई सुधार किए जा सकते हैं, उदा। एनिमेशन, एक बेहतर संख्या पोजिशनिंग, विस्तृत मिनट का प्रतिनिधित्व, एक अच्छी पृष्ठभूमि और इतने पर। हालांकि वे scope w.r.t. से बाहर हैं सवाल और विचार नहीं किया गया था।

import QtQuick 2.4 
import QtQuick.Window 2.2 
import QtQuick.Controls.Styles 1.3 
import QtQuick.Layouts 1.1 

Window { 
    visible: true 
    width: 280; height: 280 

    RowLayout {    // centre time label 
     anchors.centerIn: parent 
     Text { 
      id: h 
      font.pixelSize: 30 
      font.bold: true 
      text: outer.currentItem.text 
     } 
     Text { 
      id: div 
      font.pixelSize: 30 
      font.bold: true 
      text: qsTr(":") 
     } 
     Text { 
      id: m 
      font.pixelSize: 30 
      font.bold: true 
      text: inner.currentItem.text 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: outer.choiceActive = inner.choiceActive = !outer.choiceActive 
     } 
    } 


    PathView {   // hours path 
     id: outer 
     property bool pressed: false 
     model: 12 

     interactive: false 
     highlightRangeMode: PathView.NoHighlightRange 
     property bool choiceActive: false 

     highlight: Rectangle { 
      id: rect 
      width: 30 * 1.5 
      height: width 
      radius: width/2 
      border.color: "darkgray" 
      color: "steelblue" 
      visible: outer.choiceActive 
     } 

     delegate: Item { 
      id: del 
      width: 30 
      height: 30 
      property bool currentItem: PathView.view.currentIndex == index 
      property alias text : textHou.text 
      Text { 
       id: textHou 
       anchors.centerIn: parent 
       font.pixelSize: 24 
       font.bold: currentItem 
       text: index + 1 
       color: currentItem ? "black" : "gray" 
      } 

      MouseArea { 
       anchors.fill: parent 
       enabled: outer.choiceActive 
       onClicked: outer.choiceActive = false 
       hoverEnabled: true 
       onEntered: outer.currentIndex = index 
      } 
     } 

     path: Path { 
      startX: 200; startY: 40 
      PathArc { 
       x: 80; y: 240 
       radiusX: 110; radiusY: 110 
       useLargeArc: false 
      } 
      PathArc { 
       x: 200; y: 40 
       radiusX: 110; radiusY: 110 
       useLargeArc: false 
      } 
     } 
    } 

    PathView {   // minutes path 
     id: inner 
     property bool pressed: false 
     model: 6 
     interactive: false 
     highlightRangeMode: PathView.NoHighlightRange 
     property bool choiceActive: false 

     highlight: Rectangle { 
      width: 30 * 1.5 
      height: width 
      radius: width/2 
      border.color: "darkgray" 
      color: "lightgreen" 
      visible: inner.choiceActive 
     } 

     delegate: Item { 
      width: 30 
      height: 30 
      property bool currentItem: PathView.view.currentIndex == index 
      property alias text : textMin.text 
      Text { 
       id: textMin 
       anchors.centerIn: parent 
       font.pixelSize: 24 
       font.bold: currentItem 
       text: index * 10 
       color: currentItem ? "black" : "gray" 
      } 

      MouseArea { 
       anchors.fill: parent 
       enabled: inner.choiceActive 
       onClicked: inner.choiceActive = false 
       hoverEnabled: true 
       onEntered: inner.currentIndex = index 
      } 
     } 

     path: Path { 
      startX: 140; startY: 60 
      PathArc { 
       x: 140; y: 220 
       radiusX: 40; radiusY: 40 
       useLargeArc: false 
      } 
      PathArc { 
       x: 140; y: 60 
       radiusX: 40; radiusY: 40 
       useLargeArc: false 
      } 
     } 
    } 

    // to set current time! 
    onVisibleChanged: { 
     var d = new Date(); 
     outer.currentIndex = d.getUTCHours() % 12 
     inner.currentIndex = d.getMinutes()/10 
    } 
}