QML ComboBox 图片加文字

最新推荐文章于 2024-04-01 00:15:20 发布

lainegates

最新推荐文章于 2024-04-01 00:15:20 发布

阅读量3.5k

点赞数

分类专栏： QtQuick 文章标签： combo box Qml 图片字体

本文链接：https://blog.csdn.net/LaineGates/article/details/51005329

版权

QtQuick 专栏收录该内容

12 篇文章 18 订阅

订阅专栏

Qml 目前版本的 ComboBox，不支持设置下拉菜单字体，也不支持下拉菜单带图片。在一番搜索加调整后，我写成下面的代码，可以满足这个功能。
只是调整字体，请见ComboxBox 调整字体

Rectangle {
    id:comboBox
    property var items: [
{ lang: "en", img: "img/European-Union-icon.png" },
{ lang: "sp", img: "img/Brazil-icon.png" },
{ lang: "fr", 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;
            fillMode: Image.PreserveAspectFit
            source: "image/tunnel_arch.png";
            height: 100
            width:  100
        }

        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: 30;
            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: modelData.img;
                    fillMode: Image.PreserveAspectFit
                    anchors.fill: parent
                }

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

                }

                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        comboBox.state = ""
                        chosenItemText.text = modelData.lang;
                        listView.currentIndex = index;
                        main_img.source = comboBox.items[index].img
                    }
                }
            }
        }
    }

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