[Solved]QML dropdown list with images

[gedixss]

Hi guys :)

I have a drop down list like this:

!http://i.imgur.com/5qvb4PD.png(sample)!

In red area instead of text "en", "sp", fr" I would like to place flag icons and keep key values as it is ("en", "sp", fr"), but couldn't find any useful examples while googling.

Here is the code of main.qml:

@Rectangle {
id:comboBox
property variant items: ["en", "sp", "fr"];
property variant img: [ "qml/canvas_img/img/European-Union-icon.png", "qml/canvas_img/img/Brazil-icon.png", "qml/canvas_img/img/Jamaica-icon.png" ];
signal comboClicked;
anchors.top: main.top;
anchors.topMargin: 30;
anchors.left: main.left;
anchors.leftMargin: 415;
width: 60;
height: 60;
smooth:true;

        Rectangle {
            id:chosenItem
            radius:4;
            width:parent.width;
            height:comboBox.height;
            smooth:true;

            Image {
                id: main_img;
                source: "img/European-Union-icon.png";
            }

            Text {
                anchors.centerIn: parent;
                id:chosenItemText
                x: 11
                y: 5
                color: "#ffffff"
                text:"ENG";
                anchors.topMargin: 5
                anchors.left: parent.left
                anchors.leftMargin: 12
                font.family: "Arial"
                font.pointSize: 14;
                smooth:true
                visible: false;
            }

            MouseArea {
                width: 400
                height: 30
                anchors.bottomMargin: 0
                anchors.fill: parent;
                onClicked: {
                    comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
                }
            }
        }
        Rectangle {
            id:dropDown
            width:comboBox.width;
            height:0;
            clip:true;
            radius:4;
            anchors.top: chosenItem.bottom;
            anchors.margins: 2;
            color: "red"

            ListView {
                id:listView
                height:500;
                model: comboBox.items
                currentIndex: 0;

                delegate: Item{
                    width:comboBox.width;
                    height: comboBox.height;
                    Image {
                        id: img3;
                        source: "";
                    }

                    Text {
                        text: modelData
                        anchors.top: parent.top;
                        anchors.left: parent.left;
                        anchors.margins: 5;
                        color: "#ffffff";

                    }

                    MouseArea {
                        anchors.fill: parent;
                        onClicked: {
                            comboBox.state = ""
                            chosenItemText.text = modelData;
                            listView.currentIndex = index;
                            rootItem.selectLanguage(comboBox.items[index]);
                            Img.changeImage(main_img,comboBox.img[index]);
                        }
                    }
                }
            }
        }

        states: State {
            name: "dropDown";
            PropertyChanges { target: dropDown; height:60*comboBox.items.length }
        }

        transitions: Transition {
            NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
        }
  }@

I would apreciate any help :)

[Xander84]

I see you are using a custom ComboBox with your own ListView and already have a Image + text in there, so what exactly isn't working for you?

My tip, you should use a single model, and not separate arrays for the text and image path:
@
property var items: [
{ lang: "en", img: "qml/canvas_img/img/European-Union-icon.png" },
{ lang: "sp", img: "qml/canvas_img/img/Brazil-icon.png" },
{ lang: "fr", img: "qml/canvas_img/img/Jamaica-icon.png" }
]
@
I used the "var" type here, I still have no idea what exactly the difference is but as far as I know from the Qt doc you should use var instead of variant, would be nice if someone could explain that maybe :D

anyway you can use that model in an easy way and don't need to use the array and index manually, you can access the properties of each item like this in your delegate:
@
modelData.lang
modelData.img
@
so you can think of the "modelData" is an attached property with your current item and you can access all properties of the model item.
Your should also use that in your MouseArea, you have access so the modelData and don't need to use the item array directly.

[Eddy]

@xander
Var vs variant

Qml docs say:
A variant is a generic property type. A variant type property can hold any of the basic type values

As I understand it : A var in javascript can be any object (not only basic types)

Maybe some more testing is needed to be sure...;-)

[Xander84]

@Eddy yes but I've seen this page http://qt-project.org/doc/qt-5.0/qtqml/qml-variant.html and it states "The variant type is a generic property type. It is obsolete and exists only to support old applications; new applications should use var type properties instead." that is what I meant but had to search for the official documentation again.
So I guess you should always use "var" like in JavaScript (as I do in all of my apps so far), i was just wondering because I've seen many people use "variant" here in the forums.

[Eddy]

Thanks for the update ;-)

[gedixss]

Thanks for all that works ! ;))