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

有兴趣的朋友可以阅读我们全球开发者网站的文章＂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＂按钮也自动跑到我们键盘的上面．这样当我们输入完我们的内容的时候，我们可以直接按下按钮来进行创建一个账号，而不用先把键盘弄消失掉，再提交．

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

我们来用另外一个例程来展示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

在重新运行我们的应用：





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

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