在qml中的Combobox样式

时间:2016-10-24 14:53:29

标签: qt qml

我试图制作漂亮的组合框。为此,我使用此answer作为背景。这是我的代码:

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Private 1.0

ComboBox
{
    id: box
    currentIndex: 2
    activeFocusOnPress: true
    style: ComboBoxStyle {
    id: comboBox
    background: Rectangle {
        id: rectCategory
        color: "transparent"
        border.width: 1
        border.color: "white"
        radius: 15
    }
    label: Text {
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pointSize: 15
        font.family: "Courier"
        font.capitalization: Font.SmallCaps
        color: "white"
        text: control.currentText
    }

    // drop-down customization here
    property Component __dropDownStyle: MenuStyle {
        __maxPopupHeight: 600
        __menuItemType: "comboboxitem"

        frame: Rectangle {              // background
            color: "green"
            border.width: 1
            border.color: "white"
            radius: 15
        }
        padding.top: 12
        padding.bottom: 12

        itemDelegate.label:             // an item text
            Text
            {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 15
                font.family: "Courier"
                font.capitalization: Font.SmallCaps
                color: "white"
                text: styleData.text
            }

        itemDelegate.background: Rectangle {  // selection of an item
            radius: 5
            color: styleData.selected ? "#1fcecb" : "transparent"
        }

        __scrollerStyle: ScrollViewStyle { }
    }

    property Component __popupStyle: Style {
        property int __maxPopupHeight: 400
        property int submenuOverlap: 100

        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
}

结果为enter image description here

现在我有几个问题:

  • 如何去除白角?我希望所有角落都是圆的。
  • 如何删除大矩形下的阴影?从右到右。
  • 是否有可能在下拉菜单和带文字的上方矩形之间留下空隙?

0 个答案:

没有答案