2017-12-31 117 views
0

In HTML ist möglich, eine Auswahl von Optionen mit der Gruppe machen:QTQuick ComboBox Gruppe

<select> 
    <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </optgroup> 
    <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </optgroup> 
</select> 

Es ist möglich, in QTQuick (ComboBox)? Wie?

Vielen Dank und ein gutes neues Jahr!

Antwort

2

Es ist nicht direkt möglich mit den Standard QtQuick Controls (1.0 oder 2.0), Sie müssen das Steuerelement ein wenig ändern.

Aber das ist nicht zu schwer: Hier ist ein komplettes Beispiel.

import QtQuick 2.9 
import QtQuick.Window 2.2 
import QtQuick.Controls 2.2 

Window { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 

    ComboBox { 
     id: control 
     width: 200 
     model: ListModel { 
      ListElement { textRole: "Swedish cars"; kind: "header" } 
      ListElement { textRole: "Saab"; kind: "element" } 
      ListElement { textRole: "Volvo"; kind: "element" } 
      ListElement { textRole: "German cars"; kind: "header" } 
      ListElement { textRole: "Mercedes"; kind: "element" } 
      ListElement { textRole: "Audi"; kind: "element" } 
     } 

     currentIndex: 2 

     delegate: ItemDelegate { 
      width: parent.width 
      contentItem: Text { 
       text: textRole 
       font.bold: kind == "header" 
      } 
      highlighted: control.highlightedIndex === index 
      MouseArea { 
       anchors.fill: parent 
       onClicked: { 
        if(kind == "element") { 
         control.currentIndex = index 
         control.popup.close() 
        } 
       } 
      } 
     } 

     contentItem: Text { 
      leftPadding: 5 
      rightPadding: control.indicator.width + control.spacing 
      text: control.model.get(control.currentIndex).textRole 
      font: control.font 
      horizontalAlignment: Text.AlignLeft 
      verticalAlignment: Text.AlignVCenter 
      elide: Text.ElideRight 
     } 
    } 
} 

Sie können es dann reinigen ein wenig, steckte es in eine eigene Datei und es genau wie

ComboBox { 
    model: ListModel { 
     ListElement { textRole: "Swedish cars"; kind: "header" } 
     ListElement { textRole: "Saab"; kind: "element" } 
     ListElement { textRole: "Volvo"; kind: "element" } 
     ListElement { textRole: "German cars"; kind: "header" } 
     ListElement { textRole: "Mercedes"; kind: "element" } 
     ListElement { textRole: "Audi"; kind: "element" } 
    } 
} 

verwenden oder vielleicht benutzerdefinierte HeaderElement und Textelement Subklassen erstellen, so dass es wie

sieht
ComboBox { 
    model: ListModel { 
     ComboHeader { text: "Swedish cars" } 
     ComboText { text: "Saab" } 
     ComboText { text: "Volvo" } 
     ComboHeader { text: "German cars" } 
     // etc... 
    } 
} 

... es hängt davon ab, wie weit über die Over-Engineering-Skala Sie hinwollen: p

+0

Gut! Gelöst .... Danke! –

0

T er gleiche Lösung wie @ Jean-Michaël Celerier vorgeschlagen, aber ein bisschen vereinfacht:

ComboBox { 
    anchors.centerIn: parent 
    model: ListModel { 
     ListElement {name: "item1"; group: true } 
     ListElement {name: "subitem1" } 
     ListElement {name: "subitem2" } 
     ListElement {name: "item2"; group: true } 
     ListElement {name: "subitem1" } 
     ListElement {name: "subitem2" } 
    } 
    delegate: ItemDelegate { 
     text: name 
     enabled: (group != true) 
     font.bold: (group == true) 
     font.capitalization: (group == true ? Font.AllUppercase : Font.MixedCase) 
     leftPadding: (group == true ? 10 : 5) 
    } 
}