QML ComboBox 图片加文字

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

Rectangle {id:comboBoxproperty 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:chosenItemradius:4;width:parent.width;height:comboBox.height;smooth:true;Image {id: main_img;fillMode: Image.PreserveAspectFitsource: "image/tunnel_arch.png";height: 100width:  100}Text {anchors.centerIn: parent;id:chosenItemTextx: 11y: 5color: "#ffffff"text:"ENG";anchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 12font.family: "Arial"font.pointSize: 30;smooth:truevisible: false;}MouseArea {width: 400height: 30anchors.bottomMargin: 0anchors.fill: parent;onClicked: {comboBox.state = comboBox.state==="dropDown"?"":"dropDown"}}}Rectangle {id:dropDownwidth:comboBox.width;height:0;clip:true;radius:4;anchors.top: chosenItem.bottom;anchors.margins: 2;color: "red"ListView {id:listViewheight:500;model: comboBox.itemscurrentIndex: 0;delegate: Item{width:comboBox.width;height: comboBox.height;Image {id: img3;source: modelData.img;fillMode: Image.PreserveAspectFitanchors.fill: parent}Text {text: modelData.langanchors.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 }}
}

效果如下：

QML ComboBox 图片加文字相关推荐

PIL实现两张图片合成一张，和图片加文字
PIL实现两张图片合成一张,和图片加文字文章目录: 一.PIL实现两张图片合成一张 1.方法一: 2.方法二二.图片添加文字首先说明一下: (小姐姐是谁,是my sweetheart ,请勿使用 ...
图片加文字用什么软件？推荐这三款软件给你
当你在生活中,拍了一些好看的风景照,想要分享给朋友时,却总是感觉照片上少了些什么,有些单调,这时怎么办呢?我们可以利用一些软件来给照片中的事物添加文字介绍,从而凸显出照片的主题,使其效果更佳.那图片加 ...
PHP实现给图片加文字水印
PHP实现给图片加文字水印一.开发环境 1.Windows+Apache+MySQL+PHP的环境. 2.文本编辑器:Sublime. 二.主要技术 PHP+HTML+CSS 三.效果图与具体步骤 ...
ASP.NET(C#)图片加文字、图片水印
ASP.NET(C#)图片加文字.图片水印 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 2 ...
Java图片加文字水印
Java图片加文字水印 import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.I ...
(PHP)图片加文字和图片合成
图片加文字 <?php $bigImgPath = 'backgroud.png';$img = imagecreatefromstring(file_get_contents($bigImgP ...
给图片加文字，加图片
'''给图片加文字''' from PIL import Image, ImageDraw, ImageFontfile = 'C:\\Users\\14399\\Desktop\\new_1.png ...
QML的图片加载，内存优化研究（一）
QML的图片加载,内存优化研究(一) QML加载图片的两个控件 Image控件及其相关属性 Image加载图片的内存问题代码一: 代码二: 代码三: 代码四: 代码五: 通过源码来分析 QML加载图 ...
图片加文字如何制作？建议收藏下面这几个方法
前几天跟朋友出门去海边旅游,由于我的小侄子从小就非常喜欢海边,我就开始了扫荡式的拍照,各种海洋生物能拍的我都拍了.在我准备把照片传给小侄子的时候,我突然想到他可能都不太认识这些海洋生物,于是我就在照片 ...

QML ComboBox 图片加文字

QML ComboBox 图片加文字相关推荐

最新文章

热门文章