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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。