Qt-QML-ComboBox-自定义，实现状态表示，内容可以动态正价，使用ListModel

哎呀呀呀，

问：杀死一个程序员一个程序要需要进步？

答：改三次需求

我感觉我就要再这需求的变更中被杀死了。不管怎么说，总是要跟着需求走的的，客户才是第一么（要不是因为钱，我才不会了）

下面先上个效果

如图中显示一样，我需要再再这个Item前面用来显示一个我的当前设备的状态，这里的状态是有底层数据提供，这里试试做出相应的显示，

绿色标识可以设备可用，而红色表示设备故障，不能使用。

找啊找啊，最好还是找到了Qt的帮助文档，这里有自定义的ComboBox的Demo

先吧人家的源代码贴上来

import QtQuick 2.6 import QtQuick.Controls 2.1 ComboBox { id: control model: ["First", "Second", "Third"] delegate: ItemDelegate { width: control.width contentItem: Text { text: modelData color: "#21be2b" font: control.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } highlighted: control.highlightedIndex == index } indicator: Canvas { id: canvas x: control.width - width - control.rightPadding y: control.topPadding + (control.availableHeight - height) / 2 width: 12 height: 8 contextType: "2d" Connections { target: control onPressedChanged: canvas.requestPaint() } onPaint: { context.reset(); context.moveTo(0, 0); context.lineTo(width, 0); context.lineTo(width / 2, height); context.closePath(); context.fillStyle = control.pressed ? "#17a81a" : "#21be2b"; context.fill(); } } contentItem: Text { leftPadding: 0 rightPadding: control.indicator.width + control.spacing text: control.displayText font: control.font color: control.pressed ? "#17a81a" : "#21be2b" horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { implicitWidth: 120 implicitHeight: 40 border.color: control.pressed ? "#17a81a" : "#21be2b" border.width: control.visualFocus ? 2 : 1 radius: 2 } popup: Popup { y: control.height - 1 width: control.width implicitHeight: listview.contentHeight padding: 1 contentItem: ListView { id: listview clip: true model: control.popup.visible ? control.delegateModel : null currentIndex: control.highlightedIndex ScrollIndicator.vertical: ScrollIndicator { } } background: Rectangle { border.color: "#21be2b" radius: 2 } } }

这里了，大家可以看到，这里的model就是一个简单的ListModel，这里我所卡住的难点就是这个“modelData”

这个之所以困扰我，就是因为再这里，我是没法当我自己定义自己的数据类型的时候，我第一个名字开始是没有想到MOdedata,我所想到的是吧text的内容设置成为这个内容，但是了，由于自己现在对QMl还是不怎么深入了解，所以也没法重新高太底层的，所以，好烦啊。

看到网友的启发，说默认的QStringList咋QLisview中，默认的键值就是modelData。所以，小脑瓜灵机一抖，把我的ListModel第一个参数就设置成为modelData，哈哈哈，是不是很聪明，就是这样，就可以实现我默认的功能了，而生下的功能就是自己加的的，后面就好实现了，当然，好实现是我心想的，但是实现起来，坑是必然的，所以我要接着去挖坑，天坑。。。。。。

下面附上我的自己的代码

import QtQuick 2.6 import QtQuick.Controls 2.1 ComboBox { id: control // model: ["First", "Second", "Third"] delegate: ItemDelegate { width: control.width contentItem: Rectangle { color:"transparent" Row { spacing: 10 Rectangle { width: parent.height height: parent.height radius: parent.height/2 color: { if(model.value == "true") { "#00FF00" } else if(model.value == "false") { "#FF0000" } } } Text { id:myText text: modelData color: "#21be2b" font: control.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } } } highlighted: control.highlightedIndex == index } indicator: Canvas { id: canvas x: control.width - width - control.rightPadding y: control.topPadding + (control.availableHeight - height) / 2 width: 12 height: 8 contextType: "2d" Connections { target: control onPressedChanged: canvas.requestPaint() } onPaint: { context.reset(); context.moveTo(0, 0); context.lineTo(width, 0); context.lineTo(width / 2, height); context.closePath(); context.fillStyle = control.pressed ? "#17a81a" : "#21be2b"; context.fill(); } } contentItem: Text { leftPadding: 0 rightPadding: control.indicator.width + control.spacing text: control.displayText font: control.font color: control.pressed ? "#17a81a" : "#21be2b" horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { implicitWidth: 120 implicitHeight: 40 border.color: control.pressed ? "#17a81a" : "#21be2b" border.width: control.visualFocus ? 2 : 1 radius: 2 } popup: Popup { y: control.height - 1 width: control.width implicitHeight: listview.contentHeight padding: 1 contentItem: ListView { id: listview clip: true model: control.popup.visible ? control.delegateModel : null currentIndex: control.highlightedIndex ScrollIndicator.vertical: ScrollIndicator { } } background: Rectangle { border.color: "#21be2b" radius: 2 } } }

调用部分

DLComboBox { x: 100 y:100 width: 200 height: 20 model: listmodel } ListModel { id:listmodel ListElement{modelData:"xxx";value:"true"} ListElement{modelData:"sss";value:"false"} ListElement{modelData:"ddd";value:"true"} ListElement{modelData:"fff";value:"false"} ListElement{modelData:"ggg";value:"true"} ListElement{modelData:"hhh";value:"false"} }

Qt

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。