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