Qt官方示例-虚拟键盘使用

短命女 2023-06-18 07:56 20阅读 0赞

> 这是一个使用Qt虚拟键盘的QML文本输入示例。

![demo.gif][]

该示例提供两种使用方式：一种用于桌面平台，另一种用于嵌入式平台，本例采用嵌入式平台方式显示。它们区别是前者脱离窗口应用于全局，后者依附于窗口。

disable-desktop|android-embedded|!isEmpty(CROSS_COMPILE)|qnx {
        DEFINES += MAIN_QML=\\\"basic-b2qt.qml\\\" # 采用了自定义的虚拟键盘的InputPanel，可以依附窗口。
    } else {
        DEFINES += MAIN_QML=\\\"Basic.qml\\\"       # 独立于窗口
    }

### 0x00 使用(Qt5.7版本以上) ###

1.  代码添加

qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

1.  Qml文件导入模块

import QtQuick.VirtualKeyboard 2.1

1.  TextInput派生类类带有TextInput派生类的控件获得输入焦点即可调用出**虚拟键盘**。

### 0x01 根据不同的输入方式显示不同的键盘 ###

*  设置`inputMethodHints`变量即可

TextField { 
        id: digitsField
        width: parent.width
        placeholderText: "Digits only field" /* 输入为空时显示的提示文字 */
        inputMethodHints: Qt.ImhDigitsOnly   /* 输入策略 */
        enterKeyAction: EnterKeyAction.Next  /* 键盘确定键策略 */
        onAccepted: textArea.focus = true    /* 结束输入操作行为 */
    }

*  常用值有：

<table> 
 <thead> 
  <tr> 
   <th>inputMethodHints</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ImhNone</td> 
   <td>默认键盘(默认值)</td> 
  </tr> 
  <tr> 
   <td>ImhDigitsOnly</td> 
   <td>数字键盘</td> 
  </tr> 
  <tr> 
   <td>ImhUppercaseOnly</td> 
   <td>大写键盘</td> 
  </tr> 
  <tr> 
   <td>ImhLowercaseOnly</td> 
   <td>小写键盘</td> 
  </tr> 
  <tr> 
   <td>ImhFormattedNumbersOnly</td> 
   <td>数字键盘 + 逻辑符号键盘</td> 
  </tr> 
 </tbody> 
</table>

### 0x02 预览 ###

*  默认键盘

![main\_page.png][main_page.png]

*  数字键盘

![main\_page2.png][main_page2.png]

*  数字键盘 + 逻辑符号键盘

![main\_page3.png][main_page3.png]

*  支持切换输入法

![main\_page4.png][main_page4.png]

#### 0x03 关于更多 ####

*  在**QtCreator软件**可以找到：

![what\_find.png][what_find.png]

*  或在以下**Qt安装目录**找到：

C:\Qt\{ 你的Qt版本}\Examples\{ 你的Qt版本}\virtualkeyboard\basic

*  **相关链接**

https://doc.qt.io/qt-5/qtvirtualkeyboard-basic-example.html

*  Qt君公众号回复『**Qt示例**』获取更多内容。

[demo.gif]: https://img-blog.csdnimg.cn/20191201132217177.gif
[main_page.png]: https://img-blog.csdnimg.cn/20191201135558225.png
[main_page2.png]: https://img-blog.csdnimg.cn/20191201135620813.png
[main_page3.png]: https://img-blog.csdnimg.cn/20191201135738497.png
[main_page4.png]: https://img-blog.csdnimg.cn/20191201135820232.png
[what_find.png]: https://img-blog.csdnimg.cn/20191201114631865.png