導(dǎo)讀

行文本輸入框在用于界面的文本輸入，在WEB登錄表單中應(yīng)用廣泛。一般行文本編輯框可定制性較高，既可以當(dāng)作密碼輸入框，又可以作為文本過(guò)濾器。QLineEdit本身使用方法也很簡(jiǎn)單，無(wú)需過(guò)多的設(shè)置就能進(jìn)行使用。于是這篇博文主要講解如何對(duì)行文本編輯框QLineEdit進(jìn)行定制。

基本定制

為了簡(jiǎn)化工作，還是如同前面所說(shuō)的，直接用Qt Designer拖一個(gè)QLineEdit進(jìn)行編輯。代碼部分不太多：ui.lineEdit->setPlaceholderText(QStringLiteral("E-mail"));??#?設(shè)定行編輯框的占位字符ui.lineEdit->setFixedSize(155,?25);

看看效果：

?

下面編寫(xiě)QSS代碼。先考慮下外觀應(yīng)該定制的有哪些方面：邊框、背景色、圓角、鼠標(biāo)懸停時(shí)、文本大小，大概差不多了：QLineEdit?{??border:?1px?solid?rgb(41,?57,?85);???#?邊框1px寬，顏色為深紫色??border-radius:?3px;??#?給定3px邊框圓角??background:?white;???#?背景色定為白色吧??selection-background-color:?green;?#?這個(gè)屬性設(shè)定文本選中時(shí)的文本背景色??font-size:?14px?;??#?文本的大小}QLineEdit:hover?{??border:?1px?solid?blue;??#?鼠標(biāo)懸停時(shí)，我們將編輯框的邊框設(shè)置為藍(lán)色}

?

?

效果還不錯(cuò)。下面我們來(lái)看看行編輯框的另外一個(gè)應(yīng)用：密碼輸入框。在默認(rèn)情況下，當(dāng)行編輯框用于密碼輸入時(shí)，其效果如下：

利用QSS中的lineedit-password-character屬性，我們可以更改密文顯示字符內(nèi)容。QSS代碼如下：QLineEdit[echoMode="2"]?{??lineedit-password-character:?35;}

注意到這里我們使用了一個(gè)屬性選擇器來(lái)進(jìn)行選擇，就是當(dāng)QLineEdit對(duì)象的echoMode屬性值為2時(shí)，我們將他們的密文顯示字符設(shè)置為其他值。這里我們?cè)O(shè)置成了35，這是一個(gè)ASCII碼值，在ASCII碼中對(duì)應(yīng)字符為‘#’。因此：

當(dāng)然，我們還可以換成其他的字符，如‘*’。‘*’對(duì)應(yīng)的ASCII碼值為42，最終看起來(lái)將是：

當(dāng)然，默認(rèn)的圓點(diǎn)形式的密文還是更為常見(jiàn)。到底用哪種密文字符還是隨個(gè)人喜好了。另外，QLineEdit還有一個(gè)偽狀態(tài):readonly，利用這個(gè)偽狀態(tài)，我們可以設(shè)置編輯框禁用時(shí)的外觀。

自動(dòng)補(bǔ)全

自動(dòng)補(bǔ)全是個(gè)非常人性化的功能。無(wú)論實(shí)在面向程序員的代碼編輯器中，還是面向終端用戶的軟件產(chǎn)品中，自動(dòng)補(bǔ)全都能為工作效率和用戶體驗(yàn)帶來(lái)極大的提升。文本編輯框的自動(dòng)補(bǔ)全功能在數(shù)據(jù)過(guò)濾器中使用較為常見(jiàn)，用于過(guò)濾不相干數(shù)據(jù)直奔目標(biāo)數(shù)據(jù)。在WEB表單中也經(jīng)?？梢钥吹狡涞纳碛?#xff0c;如下是騰訊某產(chǎn)品的一個(gè)注冊(cè)頁(yè)面：

當(dāng)用戶輸入郵箱名的時(shí)候，編輯框會(huì)自動(dòng)補(bǔ)全郵箱后綴部分。用戶輸入完郵箱名之后即可選擇郵箱類型，也可以讓用戶看到支持的郵箱類型。在WEB前端開(kāi)發(fā)中，這樣的功能已經(jīng)有相關(guān)的JS提供，直接調(diào)用就可以實(shí)現(xiàn)。我們接下來(lái)就是嘗試實(shí)現(xiàn)Qt版的郵箱補(bǔ)全功能。

說(shuō)實(shí)話，Qt下面的自動(dòng)補(bǔ)全功能實(shí)現(xiàn)起來(lái)更加簡(jiǎn)單。因?yàn)镼t庫(kù)本身就提供了一個(gè)類QCompleter來(lái)完成這個(gè)功能。而且使用起來(lái)也很簡(jiǎn)單，直接調(diào)用QLineEdit的setCompleter()即可完成。我們?cè)趯?shí)現(xiàn)代碼中添加如下代碼：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&)));

在這里，我們使用了一個(gè)Model類來(lái)存儲(chǔ)數(shù)據(jù)。大致的原理就是，當(dāng)用戶輸入發(fā)生變化時(shí)，我們將文本內(nèi)容提取出來(lái)添加一個(gè)郵箱后綴并保存到Model類中。因?yàn)槲覀円呀?jīng)將這個(gè)Model類設(shè)置成了QCompleter類的Model，因此當(dāng)我們更新Model類的數(shù)據(jù)時(shí)，QCompleter的下拉列表的內(nèi)容也會(huì)同步更新。我們還要實(shí)現(xiàn)兩個(gè)槽函數(shù)來(lái)響應(yīng)文本變化信號(hào)和列表項(xiàng)激活的信號(hào)：void?ThemeRoller::onEmailChoosed(const?QString&?email)

{??ui.lineEdit->clear();????//?清除已存在的文本更新內(nèi)容??ui.lineEdit->setText(email);

}void?ThemeRoller::onTextChanged(const?QString&?str)

{??if?(str.contains("@"))???//?如果已經(jīng)輸入了@符號(hào)，我們就停止補(bǔ)全了。因?yàn)榈搅诉@一步，我們?cè)傺a(bǔ)全意義也不大了。??{????return;??}??QStringList?strlist;??strlist?<removeRows(0,?m_model->rowCount());???//?先清楚已經(jīng)存在的數(shù)據(jù)，不然的話每次文本變更都會(huì)插入數(shù)據(jù)，最后出現(xiàn)重復(fù)數(shù)據(jù)??for?(int?i?=?0;?i?insertRow(0);????m_model->setData(m_model->index(0,?0),?str?+?strlist.at(i));??}

}

如上代碼中的注釋所說(shuō)，將信號(hào)activated()連接到槽onEmailChoosed()。當(dāng)用戶用鼠標(biāo)選擇了某一項(xiàng)之后就把選中的項(xiàng)更新到文本框中，補(bǔ)全完成。信號(hào)textChanged()連接到onTextChanged()用于更新Model中的數(shù)據(jù)。我們的做法也很簡(jiǎn)單，在用戶的輸入文本后追加郵箱后綴再插入到model中去，這樣就實(shí)現(xiàn)了動(dòng)態(tài)更新。

定制效果

實(shí)現(xiàn)起來(lái)還是挺簡(jiǎn)單的。存在的一個(gè)缺陷是，當(dāng)我們快速輸入或刪除文本時(shí)，補(bǔ)全列表偶爾會(huì)出現(xiàn)閃爍的跡象。這是由于數(shù)據(jù)更新造成的延遲現(xiàn)象。

小結(jié)

1. QLineEdit的外觀屬性，重要的屬性：lineedit-password-character.

2. QCompleter和QLineEdit搭配使用。

總結(jié)

以上是生活随笔為你收集整理的qlineedit文本改变时_行文本编辑框QLineEdit及自动补全的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。