Awesome Flat QML UI

 

A combo box is a combination button and popup list. It provides a way to display a list of options to the user in a way that takes up minimal screen real estate.

file import

Attributes

• currentIndex: int
• currentText: string
• model: model
• pressed: bool
• down: bool
• count: int
• delegate: Component
• indicator: Component
• contentItem: Component
• background: Component
• popup: Component

describe

A combo box is a combination button and popup list. It provides a way to display a list of options to the user in a way that takes up minimal screen real estate. The data model is usually a javascript array, the List type on the C++ side, and data model support for ListModel or integers will be provided in the future.

ComboBox {
    model: ["One", "Two", "Three", "Four", "Five"]
}

example

properties document

• currentIndex: int This property holds the index of the current item in the combo box. The default value is -1, -1 when count is 0, and 0 or others in other cases. For more information , please refer to currentText.
• [read-only attribute]currentText: string This property holds the text of the current item in the combo box. For more information , please refer to currentIndex.
• model: model This property provides the data model for the combo box.
• pressed: bool This property can determine whether the combo box is pressed. Buttons can be pressed through touch or key events. For more information , please see down.
• down: bool This property can determine whether the combo box is expanded. For more information , please see pressed.
• [read-only attribute]count: int The number of items in the combo box.
• delagate: Component This property is a combo box surrogate. Note : The custom delegate needs to manually set the down attribute and currentIndex attribute to hide the drop-down list and set the current item of the drop-down list. For more information , please see contentItem
• indicator: Component Used to set the indicator that identifies whether the combo box is expanded. A commonly used setup is a triangle indicator.
• contentItem: Component Used to set the visible item of the combo box. For more information , please refer to delegate
• background: Component Used to set the background of the combobox's visible item. For more information , please check the background
• popup: Component It is used to set the background item of the drop-down box. Setting its width and height can limit the size of the drop-down box. By default, three items of the drop-down box are displayed.

source code

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("https://dabreha.blogspot.com/")
    ComboBox{
        anchors.centerIn: parent
        model: ["One", "Two", "Three", "Four", "Five"]
    } }

 ComboBox.qml

import QtQuick 2.0
Item {
    id: root


    /// This property holds the index of the current item in the combo box. The default value is -1, when count is 0 -1, otherwise it is 0 or others。
    property alias  currentIndex: _listView.currentIndex


    /**
     * @brief: This property holds the text of the current item in the combo box。
     * @note: read-only
     */
    property string currentText:  _listView.currentText


    /// This property provides the data model for the combo box。
    property alias  model:        _listView.model


    /// This property can determine whether the combo box is pressed。Buttons can be pressed via touch or key events。
    property alias  pressed:      mouseArea.pressed


    /// This property can determine whether the combo box is expanded。
    property bool   down:         false;


    /**
     * @brief: the number of items in the combo box。
     * @note: read-only
     */
    property alias  count:        _listView.count


    /**
     * @brief This property is a combo box proxy。
     * @note:The custom delegate needs to manually set the down attribute and the currentIndex attribute to hide the drop-down list and set the current item of the drop-down list。
     */
    property Component delegate:    _private.defaultDelegate


    ///Used to set the indicator that identifies whether the combo box is expanded. A commonly used setup is a triangle indicator.
    property Component indicator:   _private.defaultIndicator


    ///Used to set the visible item of the combo box.
    property Component contentItem: _private.defaultContentItem


    /// Used to set the background of the combo box's visible item。
    property Component background:  _private.defaultBackground


    /// It is used to set the background item of the drop-down box. Setting its width and height can limit the size of the drop-down box. By default, three items of the drop-down box are displayed.
    property Component popup:       _private.defaultPopup


    width: contentItemId.item.width
    height: contentItemId.item.height


    /// background
    Loader {
        id: backgroundId
        sourceComponent: background
    }


    /// contentItem
    Item {
        width: contentItemId.item.width
        height: contentItemId.item.height


        Loader {
            id: contentItemId
            sourceComponent: contentItem
        }


        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onReleased: root.down = !root.down
        }
    }


    /// indicator
    Loader {
        id: indicatorId
        sourceComponent: indicator
    }


    /// popup
    /// drop-down list ListView
    Loader {
        id: popupId
        y: contentItemId.item.height
        visible: root.down
        clip: true
        sourceComponent: popup


        ListView {
            id: _listView
            property string currentText: ""
            width:  popupId.item.width
            height: popupId.item.height
            clip: true
            delegate: root.delegate
            onCurrentIndexChanged: currentText = model[currentIndex]
        }
    }


    /* Private */
    QtObject {
        id: _private
        property Component defaultDelegate: Rectangle {
            width: 150; height: 40


            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 20
                /* When the mouse enters, the corresponding highlighted text will be displayed。 */
                color: delegateMouseArea.isEnter ? "#4cbeff" : "black"
                text: modelData
                font.bold: true
                font.pixelSize: 17
            }


            Rectangle {
                id: line
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                width: parent.width*0.8
                height: 1
                color: "#e6e8ea"
                /* The last item does not hide the divider。 */
                visible: index !== root.count - 1
            }


            MouseArea {
                id: delegateMouseArea
                property bool isEnter: false
                anchors.fill: parent
                hoverEnabled: true /* Enable real-time mouse capture。 */
                onEntered: isEnter = true
                onExited: isEnter = false
                onClicked: {
                    /* When the option is selected, the user needs to set the down state to false to make the drop-down list collapse. */
                    /* It is also necessary to set the value of currentIndex so that the text display of contentItem can be refreshed. */
                    root.down = false
                    root.currentIndex = index
                }
            }
        }


        property Component defaultIndicator: Item {
            width: root.width; height: root.height


            /* triangle indicator*/
            Item {
                anchors.verticalCenter: parent.verticalCenter
                anchors.verticalCenterOffset: 2
                anchors.right: parent.right
                anchors.rightMargin: 15
                clip: true
                width: 2*height; height: 7


                Rectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: -parent.height/2
                    width: Math.sqrt(parent.width*parent.width*2)/2; height: width
                    color: root.down ? "white" : "#4cbeff"
                    rotation: 45
                }
            }
        }


        property Component defaultContentItem: Rectangle {
            width: 150; height: 40
            color: root.down ? "#4cbeff" : "white"
            border.width: root.down ? 0 : 1
            border.color: "#d5d5d5"


            /* Display the currently selected content of the drop-down list*/
            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 20
                color: root.down ? "white" : "#333333"
                text: root.currentText
                font.bold: true
                font.pixelSize: 17
            }
        }


        property Component defaultBackground: Item { }


        /* Setting popup can set the height and width of the drop-down box */
        property Component defaultPopup: Rectangle {
            width: root.width; height: root.height * 3
            color: "#00000000"
            border.color: "#d5d5d5"
        }
    }
}