QTopia2.1触摸屏输入法的制作

关注

原创最新推荐文章于 2026-04-26 02:11:31 发布 9.9k 阅读 AI 写同款· GEO 优化 ›

转盘输入法-触摸屏版本当触屏输入法启动时，与200X年流行的按键手机相比，两者在界面布局上似乎有着异曲同工之妙。手机屏幕上半部分用于显示内容，而下半部分则化身为虚拟键盘。即，每当键盘被激活时，虚拟键盘往往会占据屏幕下方空间，导致原本的内容被顶至上方，一定程度上干扰了用户的视线。而转盘输入法则以其独特的优势脱颖而出。它会将半透明的转盘巧妙地显示在屏幕中央，既不会完全遮挡住屏幕上的内容，也不会对之前的应用显示造成过度的干扰。用户只需轻轻触摸屏幕，转盘便会迅速呈现。阅读详情

英文输入法界面效果图

中文输入法界面效果图

1 界面布局

关键:留意管理器QGridLayout类的使用!

－－－主界面的布局

GeoImDialog::GeoImDialog(QWidget *parent, const char *name, int flags) :

QWidget(parent, name, flags) {

。。。

__parentLayout = new QGridLayout(this, 1, 1); //整个输入界面的主布局管理器

__initEnglishShiftLayout(); //初始化英语输入法点击shift后的面板

__initChineseLayout(); //初始化中文输入法的面板

__initEnglishLayout(); //初始化英文输入法的面板

__parentLayout->addWidget(__englishToShiftPanel, 0, 0); //这里很关键，把三个面板放在同一个格子内

__parentLayout->addWidget(__chinesePanel, 0, 0); //通过QWidget的show和hide方法来实现显示不同

__parentLayout->addWidget(__englishPanel, 0, 0); //的输入法

。。。

｝

－－－－－中文输入面板的制作

__initChineseLayout() {

__chinesePanel = new QWidget(this);

__chineseInputLayOut=new QGridLayout(__chinesePanel, 6, 11);//设置6行11列的网格布局管理器

__chinesePanel->setFixedSize(__inputWidth, __inputHeight);

__chineseInputLayOut->setSpacing(-1);

__chinesePanel->hide(); //因为一开始默认显示英文输入法，所以中文

//输入法面板隐藏

..............

__chineseInputLayOut->addWidget(cbtnPageLeft, 0, 0); //在第一行第一列插入往左翻页按钮

__chineseInputLayOut->addMultiCellWidget(cbtnBackspace, 1, 1, 9, 10); //在第二行第10，第11列，插入退格键，退格键占2个格子

//效果见图

...............

connect(cbtnPageLeft, SIGNAL(clicked()), this, SLOT(pageLeft())); //信号和槽的连接

connect(cbtnBackspace, SIGNAL(clicked()), this, SLOT(pinyinBackspace()));

..................

｝

其他面板制作方法类似

2 添加样式

关键:留意QPalette类的使用!

这是关于QPalette的简介:

A palette consists of three color groups: a active, a disabled and an inactive color group. All widgets contain a palette, and all the widgets in Qt use their palette to draw themselves. This makes the user interface consistent and easily configurable.

If you make a new widget you are strongly advised to use the colors in the palette rather than hard-coding specific colors.

QPalette可以通过详细配置达到精确控制组件各种状态下显示效果

大概代码样式如下

QPalette pal;

QColorGroup cg;

cg.setColor(QColorGroup::Foreground, black);

cg.setColor(QColorGroup::Button, QColor( 255, 204, 102));

cg.setColor(QColorGroup::Light, white);

cg.setColor(QColorGroup::Midlight, QColor( 246, 246, 239));

cg.setColor(QColorGroup::Dark, QColor( 119, 119, 112));

cg.setColor(QColorGroup::Mid, QColor( 158, 158, 149));

cg.setColor(QColorGroup::Text, black);

cg.setColor(QColorGroup::BrightText, white);

cg.setColor(QColorGroup::ButtonText, black);

cg.setColor(QColorGroup::Base, white);

cg.setColor(QColorGroup::Background, QColor( 200, 215, 227));

cg.setColor(QColorGroup::Shadow, black);

cg.setColor(QColorGroup::Highlight, QColor( 0, 0, 128));

cg.setColor(QColorGroup::HighlightedText, white);

pal.setActive(cg);

cg.setColor(QColorGroup::Foreground, black);

cg.setColor(QColorGroup::Button, QColor( 255, 204, 102));

cg.setColor(QColorGroup::Light, white);

cg.setColor(QColorGroup::Midlight, white);

cg.setColor(QColorGroup::Dark, QColor( 119, 119, 112));

cg.setColor(QColorGroup::Mid, QColor( 158, 158, 149));

cg.setColor(QColorGroup::Text, black);

cg.setColor(QColorGroup::BrightText, white);

cg.setColor(QColorGroup::ButtonText, black);

cg.setColor(QColorGroup::Base, white);

cg.setColor(QColorGroup::Background, QColor( 200, 215, 227));

cg.setColor(QColorGroup::Shadow, black);

cg.setColor(QColorGroup::Highlight, QColor( 0, 0, 128));

cg.setColor(QColorGroup::HighlightedText, white);

pal.setInactive(cg);

cg.setColor(QColorGroup::Foreground, QColor( 128, 128, 128));

cg.setColor(QColorGroup::Button, QColor( 255, 204, 102));

cg.setColor(QColorGroup::Light, white);

cg.setColor(QColorGroup::Midlight, white);

cg.setColor(QColorGroup::Dark, QColor( 119, 119, 112));

cg.setColor(QColorGroup::Mid, QColor( 158, 158, 149));

cg.setColor(QColorGroup::Text, black);

cg.setColor(QColorGroup::BrightText, white);

cg.setColor(QColorGroup::ButtonText, QColor( 128, 128, 128));

cg.setColor(QColorGroup::Base, white);

cg.setColor(QColorGroup::Background, QColor( 200, 215, 227));

cg.setColor(QColorGroup::Shadow, black);

cg.setColor(QColorGroup::Highlight, QColor( 0, 0, 128));

cg.setColor(QColorGroup::HighlightedText, white);

pal.setDisabled(cg);

组件(QWidget)->setPalette(pal);

在这个输入法的制作中，为了省却麻烦，本身输入法不需要太复杂的样式，我们默认使用几个全局的系统定义好的样式:

namespace GeoInput {

static QPalette phusei(QColor(160, 160, 160));

static QPalette pwhite(QColor(255,255,255));

static QPalette pyellow(QColor(255,128,0));

static QPalette pblue(QColor (200, 200, 255));

}

把样式表放到单独的命名空间GeoInput内是为了防止污染全局空间域，在这个命名空间内还可以放置其他信息，比如输入法的

字体，一些输入法使用工具函数等。

然后在程序这样使用

........

cbtnPageLeft->setPalette(GeoInput::phusei); //不会些灰色的英文，只好用拼音huise，哈哈！

cbtnBackspace->setPalette(GeoInput::phusei);

.........

整个界面大致已经完成

3 中文的显示

字符编码问题是个复杂的问题，这里只简单说下能够显示汉字的最简单的步骤。

要让一个汉字显示：我想大概有2个条件吧，一个是编码要正确，另外一个必须要有能显示这个正确编码的字符的字体存在

比如我现在linux的Eclipse3.2下工作，在程序里默认的代码编辑器的编码是UTF-8

我在这个编辑器里写下的汉字"中文输入法"5个字就是UTF-8编码的

但是QTopia平台使用的是unicode编码所以得转换下编码

QString GeoInput::trUTF8(const char* str) {

static QTextCodec *codec=QTextCodec::codecForName("UTF8");

return codec->toUnicode(str);

}

cbtnChangeInput = new QPushButton(trUTF8("中文输入法"),__chinesePanel);"

这样在QTopia下面才能正确显示按钮上的5个字（中文字体也得存在$(QPEDIR)/lib/fonts目录下，不然显示方块:)）

4 汉字编码的加载

这个就比较的麻烦了，这里用的是老大写的一个类。

大概步骤如下:

--1 读取拼音表（用vector按pinyin保存）

a,阿,33237,啊,26566,呵,2000,腌,185,吖,104,嗄,60,锕,7,錒,0

ai,爱,60751,埃,5192,艾,4290,哀,4070,挨,3099,唉,2811,哎,2473,碍,2438,矮,1684,癌,576,暧,507,愛,447,嗳,444,蔼,429,捱,374,隘,242,霭,228,锿,201,皑,150,毐,122,诶,52,礙,19,嫒,11,欸,10,噯,10,曖,9,靄,3,瑷,3,騃,2,藹,2,叆,2,瞹,1,譪,1,鱫,1,娭,0,銰,0,鎄,0,㱯,0,䠹,0,䶣,0,凒,0,厓,0,呆,0,啀,0,嘊,0,娾,0,嵦,0,敱,0,敳,0,皚,0,㑸,0,㗨,0,㢊,0,䑂,0,䨠,0,佁,0,昹,0,躷,0,馤,0,㕌,0,㗒,0,㘷,0,㝶,0,㤅,0,㿄,0,䀳,0,䅬,0,䔽,0,䝽,0,䬵,0,伌,0,僾,0,呝,0,嗌,0,堨,0,塧,0,嬡,0,懓,0,懝,0,濭,0,璦,0,皧,0,砹,0,硋,0,薆,0,賹,0,鑀,0,靉,0,鴱,0