QML ComboBox 图片加文字
2016-03-29 13:51
465 查看
Qml 目前版本的 ComboBox,不支持设置下拉菜单字体,也不支持下拉菜单带图片。在一番搜索加调整后,我写成下面的代码,可以满足这个功能。
只是调整字体,请见ComboxBox 调整字体
效果如下:
只是调整字体,请见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 } } }
效果如下:
相关文章推荐
- 《老罗的Android之旅》导读PPT
- Java获得某目录下文件总大小
- springMVC json自动将date类型转换为long
- 分享内容到微博、QQ空间、人人网、开心网等社区
- 大数据下的Distinct Count(一):序
- swift 自定义画渐变色折线图
- SLF4J: Class path contains multiple SLF4J bindings.
- JAVA版微信支付V3-完全版
- Android TextView使用HTML处理字体样式、显示图片等
- Linq join
- Properties android 操作本地文件
- 查看Oracle是否锁表
- C++初始化顺序
- vim快捷键
- java基础第六天_接口与适配器模式、多态、内部类
- 转载 Easyui Tree方法扩展 - getLevel(获取节点级别)
- iOS应用性能调优的25个建议和技巧
- Objective-C中@property和@synthesize的用法
- Gym 100917 F - Find the Length
- 《精通iOS开发·第六版》数据持久化基础知识之对象归档持久化