ComboxBox 调整字体

Qml 目前版本的 ComboBox，不支持设置下拉菜单字体在一番搜索加调整后，完成下面的代码，可以满足这个功能。

如果想实现ComboBox带图片+字体，请见QML ComboBox 图片加文字

这是我搜索整理后的例子：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1

Item {
id: comboBox
width: 200
height: 50
z: 1

property var model: ["One", "Two", "Three"]

Button {
id: comboButton
anchors.fill: parent
checkable: true
text : model[0]

style: ButtonStyle {
background: Rectangle {
color: control.pressed ? "#888" : "#fff"
smooth: true
radius: 5
border.width: 2

}
label: Text {
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
//                font.family: "Courier"
//                font.capitalization: Font.SmallCaps
font.pointSize: 30
color: "black"
text: comboButton.text
}
}
onVisibleChanged: {
if(!visible)
checked = false
}
onCheckedChanged: listView.visible = checked
}
ListView {
id: listView
height :250
width: comboButton.width
z: 3  // 保证在最顶，控件可见
anchors.top: comboButton.bottom
visible: false

model: comboBox.model
highlightFollowsCurrentItem: true
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }

delegate: Rectangle{
id: delegateItem
width: comboButton.width
height: comboButton.height-0.5
radius: 5
color: ListView.isCurrentItem? "lightblue" : "#fee"
Text {
renderType: Text.NativeRendering
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
//                    font.family: "Courier"
//                    font.capitalization: Font.SmallCaps
font.pointSize: 30
color: "black"
elide: Text.ElideMiddle
text: modelData
}
MouseArea {
anchors.fill: parent;
onClicked: {
listView.currentIndex = index
comboButton.text = comboBox.model[listView.currentIndex]
comboButton.checked = false
}
}
}
}
}

效果如下：



下面是google到的一个例子，但是在MacOS上不好用。

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
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

效果如下：



参考：

Access Listview currentIndex from Delegate

QML ListView currentItem doesn’t change after a sort