Qt style

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

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

      看看效果：

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

1 2 3 4 5 6 7 8 9 10 11

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代码如下：

1 2 3

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()即可完成。我们在实现代码中添加如下代码：

1 2 3 4 5 6 7

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的下拉列表的内容也会同步更新。我们还要实现两个槽函数来响应文本变化信号和列表项激活的信号：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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中去，这样就实现了动态更新。

定制效果

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