我想ComboBox
在项目中使用该类型。是否可以更改下拉菜单的外观(颜色,形状,文本样式),还是需要组合使用矩形,ListView
s和其他类型?
以下代码应用了自定义功能,但没有为灰色的下拉菜单定义任何修改:
ComboBox {
currentIndex: 2
activeFocusOnPress: true
style: ComboBoxStyle {
id: comboBox
background: Rectangle {
id: rectCategory
radius: 5
border.width: 2
color: "#fff"
Image {
source: "pics/corner.png"
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.bottomMargin: 5
anchors.rightMargin: 5
}
}
label: Text {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pointSize: 15
font.family: "Courier"
font.capitalization: Font.SmallCaps
color: "black"
text: control.currentText
}
}
model: ListModel {
id: cbItems
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
width: 200
}
目前的公共API不允许下拉菜单的自定义为说明这里。Qt 5.4
,即Styles 1.3
,仅介绍了一些属性来自定义字体和文本(此处为文档),但仍然没有公开访问下拉自定义的权限。
同样,链接中提供的示例不适用于更新版本的Qt。这是我已经使用Qt 5.3,Qt 5.4和Qt 5.5测试过的修改版本(请记住要添加import QtQuick.Controls.Private 1.0
到导入中):
ComboBox {
id: box
currentIndex: 2
activeFocusOnPress: true
style: ComboBoxStyle {
id: comboBox
background: Rectangle {
id: rectCategory
radius: 5
border.width: 2
color: "#fff"
}
label: Text {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pointSize: 15
font.family: "Courier"
font.capitalization: Font.SmallCaps
color: "black"
text: control.currentText
}
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: 600
__menuItemType: "comboboxitem"
frame: Rectangle { // background
color: "#fff"
border.width: 2
radius: 5
}
itemDelegate.label: // an item text
Text {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pointSize: 15
font.family: "Courier"
font.capitalization: Font.SmallCaps
color: styleData.selected ? "white" : "black"
text: styleData.text
}
itemDelegate.background: Rectangle { // selection of an item
radius: 2
color: styleData.selected ? "darkGray" : "transparent"
}
__scrollerStyle: ScrollViewStyle { }
}
property Component __popupStyle: Style {
property int __maxPopupHeight: 400
property int submenuOverlap: 0
property Component frame: Rectangle {
width: (parent ? parent.contentWidth : 0)
height: (parent ? parent.contentHeight : 0) + 2
border.color: "black"
property real maxHeight: 500
property int margin: 1
}
property Component menuItemPanel: Text {
text: "NOT IMPLEMENTED"
color: "red"
font {
pixelSize: 14
bold: true
}
}
property Component __scrollerStyle: null
}
}
model: ListModel {
id: cbItems
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
width: 200
}
这里__dropDownStyle
分配了一个MenuStyle
类型。自定义此类属性的某些属性以获得所需的样式,尤其是itemDelegate
(定义组合框内项目的外观)和frame
(整个背景)。MenuStyle
有关更多详细信息,请参考链接的API。总体结果:
请注意,此方法在Windows和Android上完全可以正常工作,而在OSX上,该代码将被完全忽略。可以检查Qt安装中的qml样式文件(搜索类似的子路径qml/QtQuick/Controls/Styles/Desktop
),以查看Windows的更改并尝试调整提供的解决方案。这部分留给读者看。
我刚刚在Mac OS X 10.9上测试了此代码,并想知道它对我不起作用。您能否建议我进行一些与OS X相关的编辑,以使此工作有效。不过,在Windows平台上,一切都很好。
好吧,我当时只在Windows / Android上尝试过此代码。:)您可以检查Qt安装中的qml样式文件(搜索类似的子路径
qml/QtQuick/Controls/Styles/Desktop
),以查看Windows发生了什么变化并尝试调整解决方案。在我这边,我将在Mac上测试代码,以提供针对此特定问题的编辑(显然,我有空闲时间)。这是非常有用的!谢谢!