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

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

技术杂谈小彩虹2021-07-08 1:53:5250A+A-

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

\

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

\

\

   \

    \

\

整个项目的源码在: github.com/liu-xiao-gu…

\

\

\

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们