QtStyleSheet实践（四）：行文本编辑框QLineEdit及自动补全

QtStyleSheet实践（四）：⾏⽂本编辑框QLineEdit及⾃动补全导读
⾏⽂本输⼊框在⽤于界⾯的⽂本输⼊，在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 << "@" << "@" << "@" << "@" << "@";
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搭配使⽤。