For some reason, Combobox is not currently supported in our Ubuntu SDK. This control is in the QtQuick.Controls module. In some of our practical applications, we may need to use this feature. For example, in our Browser application:

\

\

\

When we type baidu, a list of the links we want will appear and we can choose the links we want. This is a bit like the Ajax usage we use in our HTML applications to narrow down our choices in real time, which can be useful for applications such as choosing our place names or stocks.

\

In today’s routine, we introduce a ComboBox that I designed myself. Hopefully it will be useful for some applications.

\

ComboBox.qml

\

Import QtQuick 2.0 import Ubuntu.Components 1.1 FocusScope {id: root width: parent-width; property string term; property ListModel model; property int zorder: view.z onFocusChanged: { console.log("focus is changed: " + focus) if ( focus ) { z = 100 input.focus = true } else { z = 0 input.focus = false } } SortFilterModel { id: filter model: root.model sort.property: "name" sort.order: Qt.AscendingOrder filter.property: "name" filter.pattern: { return new RegExp(input.text.trim(), "i"); } } FocusScope { anchors.fill: parent TextField { id: input anchors.horizontalCenter: parent.horizontalCenter width: root.width *.8 placeholderText: "Please input a word" focus: true } Rectangle { id: background anchors { top: view.top bottom: view.bottom left:view.left right:view.right } visible: view.visible color: "white" } ListView { id: view clip: true anchors.top: input.bottom anchors.horizontalCenter: parent.horizontalCenter width: input.width visible: enabled && input.text.length > 0 && input.focus height: enabled && input.text.length > 0 && input.focus ? view.childrenRect.height : 0 model: filter delegate: Label { width: parent.width text: modelData fontSize: "large" MouseArea { anchors.fill: parent onClicked: { console.log("something is clicked!" ) input.text = modelData; } } } } } }Copy the code

Our design is very simple. We have a TextField on top and a ListView on the bottom to display our list. This list gradually Narrows down our choices based on the string entered in the TextField. We can also click with the mouse and select the string we want. Here we use the SortFilterModel. For an introduction to this, see my article “Filtering and sorting our Models with SortFilterModel”.

\

\

Our Main program main.qml has a simple design:

\

Main.qml

\

Import QtQuick 2.0 import Ubuntu.Components 1.1 /*! \brief MainView with a Label and Button elements. */ MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "combobox.liu-xiao-guo" /* This property enables the application to change orientation when the device is rotated. The default is false. */ //automaticOrientation: true // Removes the old toolbar and enables new features of the new header. useDeprecatedToolbar: false width: units.gu(60) height: units.gu(85) Page { title: i18n.tr("combobox") Rectangle { anchors.fill: parent color: "red" } ListModel { id: mymodel ListElement { name: "apples" } ListElement { name: "pears" } ListElement { name: "oranges" } ListElement { name: "grapes" } ListElement { name: "baidu" } ListElement { name: "mango" } ListElement { name: "pineapple" } ListElement { name: "date" } ListElement { name: "watermelon" } } Column { anchors.fill: parent spacing: units.gu(2) ComboBox { model: mymodel term: "name" height: units.gu(5) } ComboBox { model: mymodel term: "name" height: units.gu(5) } } } }Copy the code

Here we directly use a ComboBox of our design to use:

\

            ComboBox {
                model: mymodel
                term: "name"
                height: units.gu(5)
            }
Copy the code

We designed a model of our own to provide some data.

\

Running our app on our phones:

\

\

   \

    \

\

The entire project source at: github.com/liu-xiao-gu…

\

\

\