由於一些原因，目前在我們的Ubuntu SDK中並沒有支援Combobox．這個控制元件是在QtQuick.Controls模組中的．在我們實際的一些應用中，我們可能需要用到這個功能．比如在我們的Browser應用中：

當我們輸入baidu時，就會出現我們希望的列表，並供選擇我們需要的連線．這有些像我們在做我們的HTML應用中的ajax用法，實時地縮小我們的選擇的範圍，對於一些應用來說還是非常有用的，比如在選擇我們的地名或股票等．

在今天的例程中，我們介紹一個我自己設計的一個ComboBox．希望對於一些應用來說是有用的．

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;
                    }
                }
            }
        }
    }
}
 

我們的設計非常簡單．我們上面是一個TextField，下面是一個ListView來顯示我們的列表．這個列表根據在TextField中輸入的字串逐漸縮小我們的選擇的範圍．我們也可以用滑鼠點選，並選擇我們需要的字串．這裡我們使用了SortFilterModel．關於它的介紹，我們可以參閱我的文章＂利用SortFilterModel來對我們的Model進行過濾及排序＂． 我們的主程式Main.qml設計比較簡單：

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)
            }

        }
    }
}
 

這裡，我們直接使用我們的設計的一個ComboBox來使用：

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

我們設計了一個自己的model來提供一些資料． 在我們的手機上執行我們的應用：