QTQuickコンボボックスグループ

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

あなたはそれが

のように見えるようにカスタムHeaderElementとのTextElementのサブクラスを作成し、少しそれをクリーンアップする独自のファイルに入れてちょうど

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

または多分同じように使用することができます

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

...あなたが行きたいエンジニアリングスケールの距離によります：p

Answer 2

T @ Jean-MichaëlCelerierと同じ解決策が示唆されましたが、少し単純化されました：

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