QTQuick組合框組

Question

在HTML中可以對組進行選擇：

<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（ComboBox）中使用？ 怎么樣？

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

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