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