博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全
阅读量:6159 次
发布时间:2019-06-21

本文共 2914 字,大约阅读时间需要 9 分钟。

导读

      行文本输入框在用于界面的文本输入,在WEB登录表单中应用广泛。一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器。QLineEdit本身使用方法也很简单,无需过多的设置就能进行使用。于是这篇博文主要讲解如何对行文本编辑框QLineEdit进行定制。

基本定制

      为了简化工作,还是如同前面所说的,直接用Qt Designer拖一个QLineEdit进行编辑。代码部分不太多:

ui.lineEdit->setPlaceholderText(QStringLiteral("E-mail"));  # 设定行编辑框的占位字符ui.lineEdit->setFixedSize(155, 25);

      看看效果:

      下面编写QSS代码。先考虑下外观应该定制的有哪些方面:边框、背景色、圆角、鼠标悬停时、文本大小,大概差不多了:

QLineEdit {	border: 1px solid rgb(41, 57, 85);   # 边框1px宽,颜色为深紫色	border-radius: 3px;  # 给定3px边框圆角	background: white;   # 背景色定为白色吧	selection-background-color: green; # 这个属性设定文本选中时的文本背景色	font-size: 14px ;  # 文本的大小}QLineEdit:hover {	border: 1px solid blue;  # 鼠标悬停时,我们将编辑框的边框设置为蓝色}

  

      效果还不错。下面我们来看看行编辑框的另外一个应用:密码输入框。在默认情况下,当行编辑框用于密码输入时,其效果如下:

      利用QSS中的lineedit-password-character属性,我们可以更改密文显示字符内容。QSS代码如下:

QLineEdit[echoMode="2"] {	lineedit-password-character: 35;}

  注意到这里我们使用了一个属性选择器来进行选择,就是当QLineEdit对象的echoMode属性值为2时,我们将他们的密文显示字符设置为其他值。这里我们设置成了35,这是一个ASCII码值,在ASCII码中对应字符为‘#’。因此:

      当然,我们还可以换成其他的字符,如‘*’。‘*’对应的ASCII码值为42,最终看起来将是:

      当然,默认的圆点形式的密文还是更为常见。到底用哪种密文字符还是随个人喜好了。另外,QLineEdit还有一个伪状态:readonly,利用这个伪状态,我们可以设置编辑框禁用时的外观。

自动补全

      自动补全是个非常人性化的功能。无论实在面向程序员的代码编辑器中,还是面向终端用户的软件产品中,自动补全都能为工作效率和用户体验带来极大的提升。文本编辑框的自动补全功能在数据过滤器中使用较为常见,用于过滤不相干数据直奔目标数据。在WEB表单中也经常可以看到其的身影,如下是腾讯某产品的一个注册页面:

      当用户输入邮箱名的时候,编辑框会自动补全邮箱后缀部分。用户输入完邮箱名之后即可选择邮箱类型,也可以让用户看到支持的邮箱类型。在WEB前端开发中,这样的功能已经有相关的JS提供,直接调用就可以实现。我们接下来就是尝试实现Qt版的邮箱补全功能。

      说实话,Qt下面的自动补全功能实现起来更加简单。因为Qt库本身就提供了一个类QCompleter来完成这个功能。而且使用起来也很简单,直接调用QLineEdit的setCompleter()即可完成。我们在实现代码中添加如下代码:

m_model = new QStandardItemModel(0, 1, this);m_completer = new QCompleter(m_model, this);ui.lineEdit->setCompleter(m_completer);connect(m_completer, SIGNAL(activated(const QString&)), this, SLOT(onEmailChoosed(const QString&)));connect(ui.lineEdit, SIGNAL(textChanged(const QString&)), this, SLOT(onTextChanged(const QString&)));

  在这里,我们使用了一个Model类来存储数据。大致的原理就是,当用户输入发生变化时,我们将文本内容提取出来添加一个邮箱后缀并保存到Model类中。因为我们已经将这个Model类设置成了QCompleter类的Model,因此当我们更新Model类的数据时,QCompleter的下拉列表的内容也会同步更新。我们还要实现两个槽函数来响应文本变化信号和列表项激活的信号:

void ThemeRoller::onEmailChoosed(const QString& email){	ui.lineEdit->clear();    // 清除已存在的文本更新内容	ui.lineEdit->setText(email);}void ThemeRoller::onTextChanged(const QString& str){	if (str.contains("@"))   // 如果已经输入了@符号,我们就停止补全了。因为到了这一步,我们再补全意义也不大了。	{		return;	}	QStringList strlist;	strlist << "@163.com" << "@qq.com" << "@gmail.com" << "@hotmail.com" << "@126.com";	m_model->removeRows(0, m_model->rowCount());   // 先清楚已经存在的数据,不然的话每次文本变更都会插入数据,最后出现重复数据	for (int i = 0; i < strlist.size(); ++i)	{		m_model->insertRow(0);		m_model->setData(m_model->index(0, 0), str + strlist.at(i));	}}

  如上代码中的注释所说,将信号activated()连接到槽onEmailChoosed()。当用户用鼠标选择了某一项之后就把选中的项更新到文本框中,补全完成。信号textChanged()连接到onTextChanged()用于更新Model中的数据。我们的做法也很简单,在用户的输入文本后追加邮箱后缀再插入到model中去,这样就实现了动态更新。

定制效果

       实现起来还是挺简单的。存在的一个缺陷是,当我们快速输入或删除文本时,补全列表偶尔会出现闪烁的迹象。这是由于数据更新造成的延迟现象。

小结

      1. QLineEdit的外观属性,重要的属性:lineedit-password-character.

      2. QCompleter和QLineEdit搭配使用。

转载地址:http://mehfa.baihongyu.com/

你可能感兴趣的文章
Subversion使用Redmine帐户验证简单应用、高级应用以及优化
查看>>
Javascript Ajax 异步请求
查看>>
DBCP连接池
查看>>
cannot run programing "db2"
查看>>
mysql做主从relay-log问题
查看>>
Docker镜像与容器命令
查看>>
批量删除oracle中以相同类型字母开头的表
查看>>
Java基础学习总结(4)——对象转型
查看>>
BZOJ3239Discrete Logging——BSGS
查看>>
SpringMVC权限管理
查看>>
spring 整合 redis 配置
查看>>
cacti分组发飞信模块开发
查看>>
浅析LUA中游戏脚本语言之魔兽世界
查看>>
飞翔的秘密
查看>>
Red Hat 安装源包出错 Package xxx.rpm is not signed
查看>>
编译安装mysql-5.6.16.tar.gz
查看>>
活在当下
查看>>
每天进步一点----- MediaPlayer
查看>>
PowerDesigner中CDM和PDM如何定义外键关系
查看>>
跨域-学习笔记
查看>>