QTQuick 콤보 그룹 HTML에서

Question

은 그룹과 옵션을 선택을 할 수 있습니다 :

<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> 

그것은 QTQuick (콤보)에서 가능하다? 방법?

감사합니다. 새해 복 많이 받으세요!

Answer 1

기본 QtQuick 컨트롤 (1.0 또는 2.0)에서는 직접 컨트롤을 변경할 수 없으므로 컨트롤을 약간 변경해야합니다.

하지만 너무 어렵지 않습니다. 여기에 완전한 예가 나와 있습니다.

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 
     } 
    } 
} 

그런 다음, 약간 그것을 청소 자체 파일에 넣어 그냥

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" } 
    } 
} 

처럼 사용하거나

처럼 보이도록 어쩌면 사용자 정의 HeaderElement 및 TextElement의 서브 클래스를 만들 수 있습니다

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

은 ... 당신이 가고 싶은 얼마나 멀리 오버 엔지니어링 규모에 따라 달라집니다 : P

Answer 2

T @ Jean-Michaël Celerier와 같은 솔루션이 제안되었지만 조금 단순화되었습니다.

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) 
    } 
}