利用在TextField中的inputMethodHints来选择不同的键盘布局

在我们的许多的应用中，我们希望键盘的布局只允许数字或字母的输入．对密码的输入，我们希望通过隐藏输入以免别人看见．那么怎么在Ubuntu的手机设计中实现这个功能呢？我们可以使用TextArea中的inputMethodHints来实现这个功能．

下面我们还是通过一个短小的例程来展示：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.2

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

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

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

    Page {
        id: page
        title: i18n.tr("TextField Input")

        Connections {
            target: Qt.inputMethod
            onVisibleChanged: console.log("OSK visible: " + visible)
        }

        property var model: [
            "Qt.ImhHiddenText",
            "Qt.ImhSensitiveData",
            "Qt.ImhNoAutoUppercase",
            "Qt.ImhPreferNumbers",
            "Qt.ImhPreferUppercase",
            "Qt.ImhPreferLowercase",
            "Qt.ImhNoPredictiveText",
            "Qt.ImhDate",
            "Qt.ImhTime",
            "Qt.ImhDigitsOnly",
            "Qt.ImhFormattedNumbersOnly",
            "Qt.ImhUppercaseOnly",
            "Qt.ImhLowercaseOnly",
            "Qt.ImhDialableCharactersOnly",
            "Qt.ImhEmailCharactersOnly",
            "Qt.ImhUrlCharactersOnly"
        ]

        property var inputMethods: [
            Qt.ImhHiddenText,
            Qt.ImhSensitiveData,
            Qt.ImhNoAutoUppercase,
            Qt.ImhPreferNumbers,
            Qt.ImhPreferUppercase,
            Qt.ImhPreferLowercase,
            Qt.ImhNoPredictiveText,
            Qt.ImhDate,
            Qt.ImhTime,
            Qt.ImhDigitsOnly,
            Qt.ImhFormattedNumbersOnly,
            Qt.ImhUppercaseOnly,
            Qt.ImhLowercaseOnly,
            Qt.ImhDialableCharactersOnly,
            Qt.ImhEmailCharactersOnly,
            Qt.ImhUrlCharactersOnly
        ]

        Flickable {
            anchors.fill: parent
            contentHeight: layout.childrenRect.height + units.gu(2)

            Column {
                id: layout
                width: parent.width

                OptionSelector {
                    id: option
                    text: page.model[selectedIndex]
                    model: page.model

                    // update the text
                    onSelectedIndexChanged: {
                        console.log("selectedIndex: " + selectedIndex )
                        text = page.model[selectedIndex]
                        textField.inputMethodHints = page.inputMethods[selectedIndex]
                    }
                }

                TextField {
                    id: textField
                    width:page.width*.7
                    placeholderText: "Please input something"
                }

                TextField {
                    id: textField1
                    width:page.width*.7
                    placeholderText: "Please input a password"
                    echoMode: TextInput.Password
                }
            }
        }
    }
}

运行上面的应用：

  

  

从上面的例程中可以看出来，我们可以通过选择不同的inputMethodHints值来实现不同的键盘布局．

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