क्यूएमएल कॉम्बोबॉक्स आइटम ड्रॉपडाउनमेनू शैली

Question

मैं अपने प्रोजेक्ट में ComboBox प्रकार का उपयोग करना चाहता हूं। क्या ड्रॉप-डाउन मेनू (रंग, आकार, टेक्स्ट शैली) की उपस्थिति को बदलना संभव है या क्या मुझे आयत, ListView एस और अन्य प्रकार के संयोजन का उपयोग करने की आवश्यकता है?

निम्नलिखित कोड अनुकूलन लागू होता है लेकिन कोई संशोधन ड्रॉप-डाउन मेनू जो ग्रे बनी हुई है के लिए परिभाषित किया गया है:

ComboBox { 
    currentIndex: 2 
    activeFocusOnPress: true 
    style: ComboBoxStyle { 
     id: comboBox 
     background: Rectangle { 
      id: rectCategory 
      radius: 5 
      border.width: 2 
      color: "#fff" 

      Image { 
       source: "pics/corner.png" 
       anchors.bottom: parent.bottom 
       anchors.right: parent.right 
       anchors.bottomMargin: 5 
       anchors.rightMargin: 5 
      } 
     } 
     label: Text { 
      verticalAlignment: Text.AlignVCenter 
      horizontalAlignment: Text.AlignHCenter 
      font.pointSize: 15 
      font.family: "Courier" 
      font.capitalization: Font.SmallCaps 
      color: "black" 
      text: control.currentText 
     } 
    } 

    model: ListModel { 
     id: cbItems 
     ListElement { text: "Banana" } 
     ListElement { text: "Apple" } 
     ListElement { text: "Coconut" } 
    } 
    width: 200 
} 

Answer 1

वर्तमान सार्वजनिक API का ड्रॉप-डाउन मेनू के अनुकूलन कहा गया है here अनुमति नहीं है। Qt 5.4, यानी Styles 1.3, फोंट और टेक्स्ट (दस्तावेज़ here) को अनुकूलित करने के लिए बस कुछ गुण प्रस्तुत किए हैं, लेकिन अभी भी ड्रॉप-डाउन अनुकूलन के लिए कोई सार्वजनिक पहुंच नहीं है।

इसके अलावा, लिंक में प्रदान किया गया उदाहरण Qt के नए संस्करणों के साथ काम नहीं करता है। यहाँ एक संशोधित संस्करण मैं क्यूटी 5.3 के साथ परीक्षण किया गया है, क्यूटी 5.4 और क्यूटी 5.5 (आयात के लिए import QtQuick.Controls.Private 1.0 जोड़ने के लिए याद):

ComboBox { 
    id: box 
    currentIndex: 2 
    activeFocusOnPress: true 
    style: ComboBoxStyle { 
     id: comboBox 
     background: Rectangle { 
      id: rectCategory 
      radius: 5 
      border.width: 2 
      color: "#fff" 
     } 
     label: Text { 
      verticalAlignment: Text.AlignVCenter 
      horizontalAlignment: Text.AlignHCenter 
      font.pointSize: 15 
      font.family: "Courier" 
      font.capitalization: Font.SmallCaps 
      color: "black" 
      text: control.currentText 
     } 

     // drop-down customization here 
     property Component __dropDownStyle: MenuStyle { 
      __maxPopupHeight: 600 
      __menuItemType: "comboboxitem" 

      frame: Rectangle {    // background 
       color: "#fff" 
       border.width: 2 
       radius: 5 
      } 

      itemDelegate.label:    // an item text 
       Text { 
       verticalAlignment: Text.AlignVCenter 
       horizontalAlignment: Text.AlignHCenter 
       font.pointSize: 15 
       font.family: "Courier" 
       font.capitalization: Font.SmallCaps 
       color: styleData.selected ? "white" : "black" 
       text: styleData.text 
      } 

      itemDelegate.background: Rectangle { // selection of an item 
       radius: 2 
       color: styleData.selected ? "darkGray" : "transparent" 
      } 

      __scrollerStyle: ScrollViewStyle { } 
     } 

     property Component __popupStyle: Style { 
      property int __maxPopupHeight: 400 
      property int submenuOverlap: 0 

      property Component frame: Rectangle { 
       width: (parent ? parent.contentWidth : 0) 
       height: (parent ? parent.contentHeight : 0) + 2 
       border.color: "black" 
       property real maxHeight: 500 
       property int margin: 1 
      } 

      property Component menuItemPanel: Text { 
       text: "NOT IMPLEMENTED" 
       color: "red" 
       font { 
        pixelSize: 14 
        bold: true 
       } 
      } 

      property Component __scrollerStyle: null 
     } 
    } 

    model: ListModel { 
     id: cbItems 
     ListElement { text: "Banana" } 
     ListElement { text: "Apple" } 
     ListElement { text: "Coconut" } 
    } 
    width: 200 
}  

यहाँ __dropDownStyle एक MenuStyle प्रकार के साथ सौंपा गया है। इस प्रकार के कुछ गुण वांछित शैली प्राप्त करने के लिए अनुकूलित किए जाते हैं, विशेष रूप से itemDelegate (जो combobox के अंदर किसी आइटम की उपस्थिति को परिभाषित करता है) और frame (समग्र पृष्ठभूमि)। अधिक जानकारी के लिए जुड़े MenuStyle एपीआई देखें। कुल मिलाकर परिणाम:

ध्यान दें कि इस दृष्टिकोण पूरी तरह से विंडोज और Android पर काम करता है, जबकि पर OSX कोड है पूरी तरह से नजरअंदाज कर दिया। क्यूटी स्थापना के अंदर qml स्टाइल फ़ाइल की जांच कर सकते हैं (qml/QtQuick/Controls/Styles/Desktop जैसे सबपैथ की खोज करें) यह देखने के लिए w.r.t. विंडोज़ और प्रदान किए गए समाधान को अनुकूलित करने का प्रयास करें। यह हिस्सा पाठक को छोड़ दिया गया है।

Answer 2

बहुत बहुत धन्यवाद! मैं अगले कोड के द्वारा इस हल:

Item { 
id: app 
width: 200 
height: 150 

ListModel{ 
    id: dataModel 
    ListElement{ name: "Day" } 
    ListElement{ name: "Week" } 
    ListElement{ name: "Month" } 
    ListElement{ name: "Year" } 
} 

Button { 
    id: comboButton 
    width: parent.width 
    height: parent.height/5 
    checkable: true 

    style: ButtonStyle { 
     background: Rectangle { 
      color: control.pressed ? "#888" : "#fff" 
      smooth: true 
      radius: 5 
      border.width: 2 

      Image { 
       source: "pics/corner.png" 
       anchors.bottom: parent.bottom 
       anchors.right: parent.right 
       anchors.bottomMargin: 5 
       anchors.rightMargin: 5 
      } 
     } 
     label: Text { 
      renderType: Text.NativeRendering 
      verticalAlignment: Text.AlignVCenter 
      horizontalAlignment: Text.AlignHCenter 
      font.family: "Courier" 
      font.capitalization: Font.SmallCaps 
      font.pointSize: 15 
      color: "black" 
      text: "Day" 
     } 
    } 
    onVisibleChanged: { 
     if(!visible) 
      checked = false 
    } 
} 

TableView { 
    id: tableView 
    height: 120 
    width: parent.width 
    anchors.bottom: parent.bottom 
    highlightOnFocus: true 
    headerVisible: false 
    visible: comboButton.checked ? true : false 

    TableViewColumn { 
     role: "name" 
    } 
    model: dataModel 

    itemDelegate: Item { 
     Rectangle { 
      color: styleData.selected ? "#888" : "#fff" 
      height: comboButton.height - 0.5 
      border.width: 0.5 
      width: parent.width 

      Text { 
       renderType: Text.NativeRendering 
       anchors.verticalCenter: parent.verticalCenter 
       anchors.horizontalCenter: parent.horizontalCenter 
       font.family: "Courier" 
       font.capitalization: Font.SmallCaps 
       font.pointSize: 15 
       color: "black" 
       elide: styleData.elideMode 
       text: styleData.value 
      } 
     } 
    } 

    rowDelegate: Item { 
     height: comboButton.height - 0.5 
    } 

    onClicked: { 
     comboButton.checked = false 
     tableView.selection.clear() 
    } 
} 
} 

Answer 3

मुझे लगता है कि जैसे तरीकों का उपयोग किया गया है, लेकिन वे focus प्रबंधन और z-index प्रबंधन के साथ सीमाओं की एक बहुत कुछ है।

मैंने ComboBox के कार्यान्वयन के साथ समाप्त किया है जिसमें 2 भाग होते हैं: एक शीर्षलेख जिसे आप वास्तव में कहीं और एक ड्रॉपडाउन घटक बनाते हैं जिसे आप गतिशील रूप से बनाते हैं। उत्तरार्द्ध में Item होता है जिसमें सब कुछ शामिल होता है (और माउस गतिविधि को अवरुद्ध करता है) और एक ड्रॉपडाउन जो हेडर के नीचे ध्यान से स्थित होता है।

कोड सुंदर यहाँ शामिल करने के लिए बड़े पैमाने पर तो आप विवरण in my blogpost with all the code