QML ComboBox风格
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了QML ComboBox风格相关的知识,希望对你有一定的参考价值。
我使用以下代码定制了一个Combobox但有一些我不理解的东西,因此无法修复。首先,id为rectDlgt的悬停元素的高度。我在控制台中输出了itemDlgt和rectDlgt的高度,但我认为它们应该是不一样的。 itemDlgt的高度为40,rectDlgt为16。
第二件事是当我按下列表中的元素时出现的灰色矩形。我假设它链接到listView但它似乎没有改变,即使在ListView中的委托。
ComboBox {
id:equipmentList
anchors.verticalCenter: parent.verticalCenter
width: 318
height:64
model: [ qsTr("Equipment1"), qsTr("Equipment2"), qsTr("Equipment3"), qsTr("Equipment4"), qsTr("Equipment5"), qsTr("Equipment6") ]
//the background of the combobox
background: Rectangle {
color: "#95A4A8"
border.color: "white"
radius: height/2
}
delegate: ItemDelegate {
id:itemDlgt
width: equipmentList.width
height:40
contentItem: Rectangle{
id:rectDlgt
width:parent.implicitWidth
height:itemDlgt.height
color:itemDlgt.hovered?"#507BF6":"white";
Text {
id:textItem
text: modelData
color: hovered?"white":"#507BF6"
font: equipmentList.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
}
}
onPressed: console.log(itemDlgt.height+" "+rectDlgt.height)//are not the same!
}
//the arrow on the right in the combobox
indicator:Image{
width:50; height:width;
horizontalAlignment:Image.AlignRight
source:comboPopup.visible ? "arrowOpen.png":"arrowClose.png";
}
//the text in the combobox
contentItem: Text {
leftPadding: 20
rightPadding: equipmentList.indicator.width + equipmentList.spacing
text: equipmentList.displayText
font: equipmentList.font
color: "white"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
elide: Text.ElideRight
}
//the list of elements and their style when the combobox is open
popup: Popup {
id:comboPopup
y: equipmentList.height - 1
width: equipmentList.width
height:contentItem.implicitHeigh
padding: 1
contentItem: ListView {
id:listView
implicitHeight: contentHeight
model: equipmentList.popup.visible ? equipmentList.delegateModel : null
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
radius: 20
border.width: 1
border.color:"#95A4A8"
}
}
}
那么如何纠正rectDlgt的高度以及压制元素上方的灰色矩形是什么?
谢谢。
编辑:有了Jiu的回答,我得到:
而新代码,仅适用于ComboBox中的委托:
...
delegate: ItemDelegate {
id:itemDlgt
width: equipmentList.width
height:40
padding:0
contentItem: Text {
id:textItem
text: modelData
color: hovered?"white":"#507BF6"
font: equipmentList.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
leftPadding: 20
}
background: Rectangle {
radius: 20
color:itemDlgt.hovered?"#507BF6":"white";
anchors.left: itemDlgt.left
anchors.leftMargin: 0
width:itemDlgt.width-2
}
...
}
...
谢谢!
答案
什么是灰色矩形
它是background
的ItemDelegate
,它的宽度是itemDlgt
的填充。 contentItem
在itemDlgt
填充。见this。
如何纠正rectDlgt的高度
itemDlgt
的高度 - rectDlgt
的高度= itemDlgt
的顶部和底部填充
40 - 16 = 12 * 2
如果您希望两个高度都是相同的值,则可以将填充设置为零。但我想你可能需要修改默认的background
。
以上是关于QML ComboBox风格的主要内容,如果未能解决你的问题,请参考以下文章
如何在 QML 的自定义 ComboBox 中突出显示所选项目?
解决QML开发中ComboBox中一个已选择项没有清除的问题