QLineEdit 仿QQ簽名框（思路很獨特：用QSS::hover顯示額外的圖片）

今天鼓搗了半天，終於實現了自定義Qt中的QlineEdit控件的大體效果。

這個問題對於新手而言，主要有如下幾個難點：

1.繼承QLineEdit控件

2.QSS設置QLineEdit的相關樣式，能夠省下不少代碼

3.自定義相關事件

void mousePressEvent(QMouseEvent *event);  // 鼠標點擊的時候，編程輸入框
void keyPressEvent(QKeyEvent *event);   // 按下Enter的時候，處理
void mouseMoveEvent(QMouseEvent *event); // 鼠標移動的時候，顯示效果

OK，下面咱們來一步步實現這個自定義控件。

首先，第一步你確定是要建立一個新類繼承QLineEdit， QtCreator會自動爲你實現一些可有可無的代碼。

第二步用PhotoShop作一個突出的高亮圖片，像QQ簽名框上的那樣：。

第三步開始實現具體的代碼了。

首先構造函數中須要設置一些QSS樣式，這一步能夠省下不少代碼，具體樣式對應的功能，請讀者自行研究。

this->setStyleSheet("QLineEdit{ background:rgba(0,0,0,0%); border:1px; font:10pt}"
                    "QLineEdit:hover{ border-image:url(:/btn_background.png); }"
                    "QLineEdit:!hover{background:rgba(0,0,0,0%);}"
                    "QLineEdit:focus {background:white;border-image:none; border:1px groove lightgray; border-radius:2px}");

實現三個繼承的事件函數：

void QSLineEdit::keyPressEvent(QKeyEvent *event)
{
    if(event->key() == Qt::Key_Enter - 1)
        this->clearFocus();

    QLineEdit::keyPressEvent(event);
}

void QSLineEdit::mousePressEvent(QMouseEvent *event)
{
    this->setFocus();
    this->setCursor(QCursor(Qt::IBeamCursor));
    QLineEdit::mousePressEvent(event);
}

void QSLineEdit::mouseMoveEvent(QMouseEvent *event)
{
    if(this->hasFocus())
        this->setCursor(QCursor(Qt::IBeamCursor));
    else
        this->setCursor(QCursor(Qt::ArrowCursor));
    QLineEdit::mouseMoveEvent(event);
}

到這一步基本上實現所有效果了，可是有一個問題須要注意：當點擊窗體其餘地方的時候，這個自定義控件不會失去焦點，即時你繼承focusOutEvent也不會；沒辦法，因此在窗體中多實現了一個事件mousePressedEvent

void Dialog::mousePressEvent(QMouseEvent *e)
{
    leEdit->clearFocus();
    QDialog::mousePressEvent(e);
}

至此OK，看起來很簡單的問題，卻想了我半天時間。源代碼在：WidgetEdit.rar

 轉載請註明出處：http://www.cnblogs.com/xufeiyang/p/3310670.html