CODEWITHSUNDEEP
qtqmlqtquick2
Ivan Kush
Ivan Kush

Reputation: 3157

Combobox with images

Is it possible to create the ComboBox with images instead of strings? It doesn't support delegate:

ComboBox {
        currentIndex: 2
        model: ListModel {
            id: cbItems
            ListElement { imageHeight: 280; imageSource: "../images/tee3.png"  }
            ListElement { imageHeight: 300; imageSource: "../images/tee5.png"  }
            ListElement { imageHeight: 218; imageSource: "../images/tee1.png"  }
        }
        delegate: Image {
            height: imageHeight
            fillMode: Image.PreserveAspectFit
            source: imageSource
        }
        width: 200
    }

Upvotes: 3

Views: 4269

Answers (3)

Ivan Kush
Ivan Kush

Reputation: 3157

As skypjack said, done using ComboBoxStyle with signals 

    ComboBox {
            id : cBox4
            height: 20
            width: 100

            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: parent.bottom
            anchors.topMargin: 10

            model : ListModel {
                id: cbItems
                ListElement { text: "type A"; imageHeight: 218; imageSource: "../images/teeA.png"  }
                ListElement { text: "type B"; imageHeight: 200; imageSource: "../images/teeB.png"  }
                ListElement { text: "type V"; imageHeight: 280; imageSource: "../images/teeV.png"  }
                ListElement { text: "type G"; imageHeight: 350; imageSource: "../images/teeG.png"  }
                ListElement { text: "type D"; imageHeight: 300; imageSource: "../images/teeD.png"  }
            }

            style: ComboBoxStyle {
                id: comStyle

                label: Item {
                    Text {
                        id: lblText
                        text: control.editText
                        font.pixelSize: p.pixelSize();

                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }

                    Image {
                        anchors.right: lblText.left
                        anchors.rightMargin: 10
                        anchors.top: lblText.top
                        anchors.topMargin: 10

                        id: img
                        height: 280
                        fillMode: Image.PreserveAspectFit
                        source: "../images/teeA.png"

                        Component.onCompleted: {
                            cBox4.currentIndexChanged.connect(changeImage)
                        }

                        function changeImage() {
                            img.source = cbItems.get(cBox4.currentIndex).imageSource;
                            img.height = cbItems.get(cBox4.currentIndex).imageHeight;
                        }
                    }
                }
            }
        }

Upvotes: 2

skypjack
skypjack

Reputation: 50548

You can maybe do it by defining you own ComboBoxStyle (here the documentation) and playing with the label field which is a Component.

Upvotes: 3

Nikita Krupenko
Nikita Krupenko

Reputation: 1175

Not yet.

Though, it uses MenuItem for elements, which can have icon. So, if you patch ComboBox.qml to use icon from model, it should be displayed.

Upvotes: 1

Related Questions