在Ubuntu应用中合理使用on-screen-keyboard来使得我们的输入更加便利Main.import QtQu

有兴趣的朋友可以阅读我们全球开发者网站的文章＂On Screen Keyboard tricks＂．里面讲了许多的东西．在今天的文章中，我们直接来一个活生生的例程来阐述这个问题．

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
    \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: "osk.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    // anchorToKeyboard: true

    Page {
        title: i18n.tr("onscreenkeyboard")
        anchors.fill: parent

        Flickable {
            id: sampleFlickable

            clip: true
            contentHeight: mainColumn.height + units.gu(5)
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
                bottom: createButton.top
                bottomMargin: units.gu(2)
            }

            Column {
                id: mainColumn

                spacing: units.gu(2)

                anchors {
                    top: parent.top
                    left: parent.left
                    right: parent.right
                    margins: units.gu(2)
                }

                TextField {
                    id: username
                    width: parent.width
                    placeholderText: "username"
                }

                TextField {
                    id: password
                    width: parent.width
                    placeholderText: "password"
                }

                TextField {
                    id: email
                    width: parent.width
                    placeholderText: "email"
                }
            }
        }

        Button {
            id: createButton
            text: "Create Account"
            anchors {
                horizontalCenter: parent.horizontalCenter
                bottom: parent.bottom
                margins: units.gu(2)
            }
            onClicked: {
                console.log("it is clicked")
            }
        }
    }
}

在上面的例程中，我们有意识地把：

    anchorToKeyboard: true

注释掉，我们可以运行我们的应用：

从上面的截图中可以看出来，当我们点击最上面的任何一个输入框时，我们最下面的＂Createt Account＂按钮就被键盘所在的位置遮住了．那么我们怎么才能可以见到我们的按钮呢？答案就是在我们的MainView中，把如下的开关打开：

    anchorToKeyboard: true

再次重新运行我们的应用：

从上面我们可以看出来．当我们点击email进行输入的时候，＂Create Account＂按钮也自动跑到我们键盘的上面．这样当我们输入完我们的内容的时候，我们可以直接按下按钮来进行创建一个账号，而不用先把键盘弄消失掉，再提交．

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

我们来用另外一个例程来展示OSK的用法：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "osk1.liu-xiao-guo"

    width: units.gu(100)
    height: units.gu(75)

  //  anchorToKeyboard: true

    Page {
        header: PageHeader {
            id: pageHeader
            title: i18n.tr("osk1")
            StyleHints {
                foregroundColor: UbuntuColors.orange
                backgroundColor: UbuntuColors.porcelain
                dividerColor: UbuntuColors.slate
            }
        }

        TextField {
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: units.gu(2)
            placeholderText: "please input something"
        }
    }
}

在上面的例程中，当我们注释掉：

    anchorToKeyboard: true

运行我们的应用，并在最下面的输入框中点击进行输入：

从上面可以看出来，当我们进行输入的时候，我们的输入框被键盘挡住了．我们看不见我们的输入框．而当我们把下面的属性设为真时：

  anchorToKeyboard: true

在重新运行我们的应用：

从上面我们可以看出来，当我们输入的时候我们可以看见我们的输入框，并可以输入为我们所需要的内容．

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