带有复选框的 QML 组合框
Posted
技术标签:
【中文标题】带有复选框的 QML 组合框【英文标题】：QML ComboBox Witth CheckBox 【发布时间】：2020-06-03 05:43:49 【问题描述】：我想在 Qml 中设计带有复选框的 ComboBox(Dynamic)。 当我检查组合框中的复选框时，我想在组合框下的列表视图中添加一个元素。 请帮我解决这个问题
下面附上示例图片
ApplicationWindow
id: applicationWindow
visible: true;
width: screen.width;
height: screen.height;
ComboBox
id: comboBox
width: parent.width
height: parent.height/20
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin: 40
anchors.top: parent.top
anchors.topMargin: 10
onCurrentIndexChanged:
var receivedData =
imageSource: "bulb",
loadType: "Light",
loadName: "▶BedRoom1",
loadStatus: false,
macId: "00:17:F1:00:00:B8_01",
;
var receivedData1 =
imageSource: "ac",
loadType: "AC",
loadName: "▶BedRoom21",
loadStatus: true,
macId: "00:17:F1:00:00:B8_02",
;
var receivedData2 =
imageSource: "dimmer",
loadType: "Dimmer",
loadName: "▶Hall1",
loadStatus: false,
macId: "00:17:F1:00:00:B8_03",
;
var receivedData3 =
imageSource: "fan",
loadType: "Fan",
loadName: "▶Hall1",
loadStatus: false,
macId: "00:17:F1:00:00:B8_04",
;
console.debug(combomodel.get(currentIndex).text)
if(combomodel.get(currentIndex).text === "Light")
loadListView(receivedData)
else if(combomodel.get(currentIndex).text === "Bulb")
loadListView(receivedData)
else if(combomodel.get(currentIndex).text === "Ac")
loadListView(receivedData1)
else if(combomodel.get(currentIndex).text === "Dimmer")
loadListView(receivedData2)
else if(combomodel.get(currentIndex).text === "Fan")
loadListView(receivedData3)
model: ListModel
id:combomodel
ListElement
//text:"Select Device"
name: ""
checked: false
function loadListView(imageSource,loadType,loadName,loadStatus,macId)
listmodel.append("src": imageSource,"load":loadType,"label" : loadName,"checkedStatus" : loadStatus,"macStatus" :macId )
delegate: Item
width: parent.width
implicitHeight: checkDelegate.implicitHeight
CheckDelegate
id: checkDelegate
width: parent.width
text: model.name
highlighted: comboBox.highlightedIndex === index
checked: model.checked
onCheckedChanged:
model.checked = checked
function appendData()
combomodel.append( "name":"S" )
combomodel.append( "name":"U" )
combomodel.append( "name":"R" )
combomodel.append( "name":"A" )
combomodel.append( "name":"J" )
combomodel.append( "name":"T" )
Component.onCompleted:
getModuleTableData()
ListView
id:listview
anchors.top: comboBox.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 5
anchors.rightMargin: 5
anchors.topMargin: 10
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.StopAtBounds
clip: true
//delegate: deviceDelegate
model: ListModel
id:listmodel
focus: true
ScrollBar.vertical: ScrollBar
Dbadaptor
id:dbadaptor
function getModuleTableData()
console.log("In getModuleTableData() function")
var data = dbadaptor.fetchModuleTable()
console.log("Data: ",data)
console.log("length",data.length)
for(var i = 0; i< data.length;i++)
console.log("Name: ",data[i])
//if(data[i] == "")
combomodel.append("name": '<b>'+data[i]+'</b>',"ckecked": "")
var dataload = dbadaptor.fetchLoadDataForGroup(i+1)
console.log("loadData :",dataload)
console.log("loaddatalength: ",dataload.length)
for(var j = 0; j<dataload.length;j++)
combomodel.append("name" : dataload[j],"checked": false)
在上面的代码中，我在带有复选框的 ComboBox 中附加数据，当我单击 CheckBox 时，我想打印一条调试消息。 在 8x1 设备名称所在的 ComboBox 中，我不想针对它附加复选框。
【问题讨论】：
如果您希望有人为您编写所有代码，那么您选择了错误的站点。请提供您解决问题的尝试，预期目标是什么以及结果是什么。显示具体错误、困难等。请阅读如何创建minimal reproducible example 和How to Ask。或许下面的文章可以帮到你：Models and Views in Qt Quick,QML Dynamic Objects @folibis，我正在添加我的代码。我将更新我的查询 请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange (SE) 网络上发帖，您已在 CC BY-SA license 下授予 SE 分发内容的不可撤销的权利（无论您未来的选择如何）。根据 SE 政策，分发非破坏版本。因此，任何此类破坏性编辑都将被还原。请参阅How does deleting work?，了解有关如何在本网站上删除内容的更多信息。 【参考方案1】：您需要做的就是将相应的属性包装为一个对象，并在复选框的onCheckChanged 插槽期间附加到列表模型中。这是一个示例代码，可能有助于实现上述目标。
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
ApplicationWindow
id: applicationWindow
visible: true;
width: 640
height: 480
ComboBox
id: comboboxId
width: parent.width / 2
height: 50
model: ListModel
ListElement name: "One"; fill: "red"; ischecked: true
ListElement name: "Two"; fill: "green"; ischecked: false
ListElement name: "Three"; fill: "blue"; ischecked: false
delegate: Item
width: parent.width
height: 50
Row
spacing: 5
anchors.fill: parent
anchors.margins: 5
CheckBox
id: checkboxId
height: parent.height
width: height
onPressed: checked = !checked
onCheckedChanged:
if(checked)
listmodelId.append( "name": name, "fill": fill )
Label
text: name
width: parent.width - checkboxId.width
height: parent.height
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
ListModel
id: listmodelId
ListView
width: parent.width / 2
height: parent.height
anchors.left: comboboxId.right
model: listmodelId
delegate: Item
height: 50
width: parent.width
Rectangle
anchors.fill: parent
color: fill
Text
anchors.centerIn: parent
text: name
onCountChanged: console.log(count)
【讨论】：
Ramkumar R，你给了我确切的解决方案但是，如果我取消选中复选框，我想删除列表视图中附加的数据，在你的代码中，如果我选中复选框，它没有检查，但是如果我点击它，它就会添加到 Listview 中。我想在选中复选框时添加数据，如果我取消选中它，它也会删除。 可以通过remove方法删除数据。但是在您的情况下，由于我们无法预测索引，因此您必须通过整个列表模型数据匹配您的唯一键（无论它基于您的要求）属性获取它的索引然后删除。这是我们可以为它做的最不可能的方法。以上是关于带有复选框的 QML 组合框的主要内容，如果未能解决你的问题，请参考以下文章