QML élément ComboBox DropDownMenu style

Je veux utiliser le ComboBox type dans mon projet. Est-il possible de changer l'apparence du menu déroulant (couleur, forme, style de texte) ou dois-je besoin d'utiliser une combinaison de rectangles, ListViews et d'autres types?

Le code suivant s'applique personnalisations, mais aucune modification n'est défini pour le menu déroulant qui demeure en gris:

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
}

OriginalL'auteur otashlanov | 2014-11-23

c++qml qt user-interface

14

Le public actuel de l'Api ne permet pas la personnalisation du menu déroulant comme indiqué ici. Qt 5.4, c'est à dire Styles 1.3, vient de présenter certaines propriétés pour personnaliser les polices et le texte (docs ici), mais pas encore de l'accès du public à liste déroulante de personnalisation.

Aussi, l'exemple fourni dans le lien ne fonctionne pas avec les versions plus récentes de l'intervalle Qt. Voici une version modifiée j'ai testé avec Qt 5.3, Qt et Qt 5.4 5.5 (n'oubliez pas d'ajouter import QtQuick.Controls.Private 1.0 pour les importations):
```
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
}     
```
Ici __dropDownStyle est attribué à un MenuStyle type. Certaines propriétés de ce type sont personnalisés pour obtenir le style désiré, en particulier itemDelegate (qui définit l'apparence d'un élément à l'intérieur de la zone de liste déroulante) et frame (fond). Reportez-vous à la MenuStyle Api pour plus de détails. Résultat global:

Noter que cette approche fait parfaitement le travail sur Windows et Android alors que sur OSX le code est complètement ignoré. On peut vérifier les qml fichier de style à l'intérieur de l'intervalle Qt de l'installation (la recherche d'un subpath comme qml/QtQuick/Controls/Styles/Desktop) pour voir quels changements w.r.t. Windows et essayer d'adapter la solution fournie. Cette partie est laissée au lecteur.

Je viens de le tester ce code sur Mac OS X 10.9 et s'étonnait qu'il ne fonctionne pas pour moi. Pourriez-vous me suggérer quelques OS X connexes modifications à faire ce travaille. Néanmoins, sur la plateforme Windows, tout va bien.
Eh bien, j'ai essayé le code que sur Windows/Android à l'époque, désolé. 🙂 Vous pouvez vérifier le qml fichier de style à l'intérieur de l'intervalle Qt de l'installation (la recherche d'un subpath comme qml/QtQuick/Controls/Styles/Desktop) pour voir quels changements w.r.t. Windows et essayer d'adapter la solution. De mon côté, je vais tester le code sur mon Mac pour fournir une modification aborder cette question spécifique (évidemment, comme j'ai du temps libre).
C'est tellement utile! Merci!!!!

OriginalL'auteur BaCaRoZzo

Merci beaucoup! J'ai résolu ce problème par le code suivant:

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

QML élément ComboBox DropDownMenu style

Beau résultat. 🙂
C'est la meilleure réponse. Merci pour cette!

OriginalL'auteur otashlanov

0

J'ai été en utilisant des approches comme ça, mais ils ont beaucoup de limitations avec focus de gestion et de z-index de gestion.

J'ai jusqu'à la fin avec la mise en œuvre de ComboBox qui se compose de 2 parties: un en-tête qui vous fait mettre quelque part et un élément déroulant qui vous créez dynamiquement. Ce dernier se compose d'un Item couvrant tout (et de l'interception de la souris) et une liste déroulante qui est soigneusement placés au-dessous de l'en-tête.

Code est assez massif pour inclus ici, donc vous pouvez voir les détails dans mon article sur le blog avec tout le code

OriginalL'auteur Ribtoks

Vous devez vous connecter pour publier un commentaire.