如何在Ubuntu QML应用中实现ComboBox的功能

由于一些原因，目前在我们的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来提供一些数据．

在我们的手机上运行我们的应用：

   

   

整个项目的源码在： https://github.com/liu-xiao-guo/combobox