[solved]How can I customize ComboBox?

[beidaochuan]

@p3c0
I modified the source as follows and I think it works well.

//IComboBox
import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

ComboBox {
    id: root
    width: 200
    height: 50

    property alias comboBoxModel: root.model
    signal indexChanged()
    property alias currentIndex: root.currentIndex
    property alias currentText: root.currentText

    property Component comboBoxStyleBackground: Component { Rectangle{} }
    property Component dropDownMenuStyleFrame: Component { Rectangle{} }

    function setComboBoxStyleBackground(background) {
        comboBoxStyleBackground = background
    }

    function setDropDownMenuStyleFrame(frame) {
        dropDownMenuStyleFrame = frame
    }

    model: ListModel {
        id: cbItems
        ListElement { text: "" }
    }

    style: ComboBoxStyle {
        id: comboBoxStyle
        background: comboBoxStyleBackground
        label: Text {
            color: "black"
            width: root.width
            height: root.height
            text: control.currentText
        }

        __dropDownStyle: MenuStyle {
            id: dropDownMenuStyle
            frame: dropDownMenuStyleFrame
            itemDelegate.label: Text {
                width:root.width - 50
                height: root.height
                color: styleData.selected ? "blue" : "black"
                text: styleData.text
            }

            itemDelegate.background: Rectangle {
                z: 1
                opacity: 0.5
                color: styleData.selected ? "darkGray" : "transparent"
            }
        }
    }

    onCurrentIndexChanged: {
        root.indexChanged()
    }
}

//MyComboBox
import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

IComboBox {
    id: root
    width: 200
    height: 50

    property int m_userLevel: 1
    comboBoxModel: ListModel {
        id: cbItems
        ListElement { text: "" }
        ListElement { text: "" }
        ListElement { text: "" }
        ListElement { text: "" }
    }


    Component {
        id: comboBoxStyleBackground
        IUserLevelImage {
            anchors.fill: parent
            userLevel: m_userLevel
        }
    }


    Component {
        id: dropDownMenuStyleFrame
        IUserLevelImage1 {
        }
    }
    onIndexChanged: {
        m_userLevel = currentIndex + 1
    }
    Component.onCompleted: {
        setComboBoxStyleBackground(comboBoxStyleBackground)
        setDropDownMenuStyleFrame(dropDownMenuStyleFrame)
    }
}

[p3c0]

@beidaochuan That's good :)
If you are done, please mark the post as solved.