Qt（二）

Qt（二）"/>

Qt（二）

在Qt中，对于QLineEdit而言，是没有menu-indicator的，这个时候要实现像qq登录界面的LineEdit：如下图所示，必须需要customize自己的LineEdit，采取的方法是继承QLineEdit，然后在自己的LineEdit添加自己的属性。

首先建立一个Qt Widget Application的工程文件，然后在工程文件中添加c++类：这里我的类名是LogEdit。

继承自QLineEdit,最后得到了关于LogEdit类的logedit.cpp和logedit.h的文件，接着开始对我们需要的edit的实现。

对于这样一个LineEdit，报刊了的输入行以及右边的一个符号，这里我们用QLabel进行装载实现。

因此头文件的内容是：

#ifndef LOGEDIT_H
#define LOGEDIT_H#include <QObject>
#include<QLabel>
#include<QLineEdit>
class LogEdit : public QLineEdit
{Q_OBJECT
public:explicit LogEdit(QWidget *parent = 0);explicit LogEdit(const QString & contents, QWidget *parent = 0);explicit LogEdit(const QString & contents, const QString & pic,QWidget *parent = 0);virtual ~LogEdit();void setLabelPic(const QString strPic);signals:void imageLabelClicked();protected:void init();void changeLabelPosition();
protected:virtual void resizeEvent(QResizeEvent *event);virtual bool eventFilter(QObject *obj, QEvent *e);private:QString mImagePath;QLabel *mImageLabel;
};#endif // LOGEDIT_H

注意：

• 如果要使用Qt的信号槽机制，对象必须要有Q_OBJECT这样一个机制的声明。然后其包含的头文件是#include<QObject>,在Assitant中，原文的表达是：The Q_OBJECT macro must appear in the private section of a class definition that declares its own signals and slots or that uses other services provided by Qt's meta-object system.
• 对于继承来自QLineEdit的LogEdit，尽量保持着原函数的构造函数，对于QLineEdit的构造函数包含三个：

QLineEdit(QWidget * parent = 0)
QLineEdit(const QString & contents, QWidget * parent = 0)
~QLineEdit()

• 添加了QLabel的事件处理，即imageLabelClicked()
• 在这里，由于LogEdit右边需要一个菜单项，因此需要一个Label标记点击的位置，所以在LogEdit中添加了mImageLabel的成员变量

接着是是对头文件的实现，在logedit.cpp文件中实现：

首先是构造函数和析构函数的实现，

对于继承来自于QLineEdit的属性，通过QLineEdit直接实现即可，重点是对新填进去的mImagePath和mImageLabel的初始化：

<span style="white-space:pre">	</span><pre name="code" class="cpp">LogEdit::LogEdit(QWidget *parent):QLineEdit(parent)
{mImagePath="";mImageLabel=NULL;setAttribute(Qt::WA_TranslucentBackground);
}LogEdit::LogEdit(const QString &contents, QWidget *parent):QLineEdit(contents,parent)
{mImagePath="";mImageLabel=NULL;setAttribute(Qt::WA_TranslucentBackground);}

对于读入的对于QLabel的图片的ICON，需要对QLabel的位置进行一定的限制，即在输入行的右下方。其次是对QLabel大小的限定。实现如下：

首先是大小和位置的确定：

void LogEdit::changeLabelPosition()
{if(mImageLabel==NULL)return;if(mImagePath.isEmpty()){mImageLabel->hide();}else{int nHeight=this->height()-4;int nWidth=this->height()-4;mImageLabel->setMaximumSize(nWidth,nHeight);// mImageLabel->setGeometry(width()+nWidth-2,(height()-nHeight)/2,nWidth,nHeight);mImageLabel->setGeometry(178-14-2,(28-nHeight)/2,nWidth,nHeight);mImageLabel->setPixmap(QPixmap(mImagePath));setTextMargins(0,0,height(),0);}
}

注意：

• 起初是想通过读取在QtDesigner中的设计好的界面的宽度和高度，从而确定出QLabel的位置，正如注释调的语句一样，但是读取到的宽度和实际在Designer的大小不一致，万般无赖下来了一个具体的数值，宽度是178，高度是28.
• setTextMargins是需要联想BoxModel，即在输入行的右边的Margin不为0，即输入的数据不会占据满所有的输入行空间，右边因为有QLabel存在。

接着是对鼠标按下的slot的实现：

void LogEdit::resizeEvent(QResizeEvent *event)
{QLineEdit::resizeEvent(event);changeLabelPosition();
}bool LogEdit::eventFilter(QObject *obj, QEvent *event)
{if (mImageLabel && obj == mImageLabel ) {if (event->type() == QEvent::MouseButtonPress) {QMouseEvent *mouseEvent = static_cast<QMouseEvent*>(event);if (mouseEvent->buttons() & Qt::LeftButton){emit imageLabelClicked();return true;}}}return QLineEdit::eventFilter(obj, event);
}

注意：

• resizeEvent的实现原因是因为：This event handler can be reimplemented in a subclass to receive widget resize events which are passed in the event parameter. When resizeEvent() is called, the widget already has its new geometry.

完整的logedit.cpp的实现是：

#include "logedit.h"
#include<QLineEdit>
#include<QtCore>
#include<QEvent>
#include<QMouseEvent>
LogEdit::LogEdit(QWidget *parent):QLineEdit(parent)
{mImagePath="";mImageLabel=NULL;setAttribute(Qt::WA_TranslucentBackground);
}LogEdit::LogEdit(const QString &contents, QWidget *parent):QLineEdit(contents,parent)
{mImagePath="";mImageLabel=NULL;setAttribute(Qt::WA_TranslucentBackground);}void LogEdit::changeLabelPosition()
{if(mImageLabel==NULL)return;if(mImagePath.isEmpty()){mImageLabel->hide();}else{int nHeight=this->height()-4;int nWidth=this->height()-4;mImageLabel->setMaximumSize(nWidth,nHeight);// mImageLabel->setGeometry(width()+nWidth-2,(height()-nHeight)/2,nWidth,nHeight);mImageLabel->setGeometry(178-14-2,(28-nHeight)/2,nWidth,nHeight);mImageLabel->setPixmap(QPixmap(mImagePath));setTextMargins(0,0,height(),0);}
}void LogEdit::init()
{if(mImageLabel==NULL){mImageLabel=new QLabel(this);//------//mImageLabel->setScaledContents(false);//这句实现具体的内容待考察mImageLabel->installEventFilter(this);//设置箭头下标}changeLabelPosition();}LogEdit::LogEdit(const QString &contents, const QString &pic, QWidget *parent):QLineEdit(contents,parent)
{mImagePath=pic;mImageLabel=NULL;setAttribute(Qt::WA_TranslucentBackground);init();
}LogEdit::~LogEdit()
{if (mImageLabel)delete mImageLabel;mImageLabel = NULL;
}
void LogEdit::setLabelPic(const QString strPic)
{mImagePath=strPic;init();
}void LogEdit::resizeEvent(QResizeEvent *event)
{QLineEdit::resizeEvent(event);changeLabelPosition();
}bool LogEdit::eventFilter(QObject *obj, QEvent *event)
{if (mImageLabel && obj == mImageLabel ) {if (event->type() == QEvent::MouseButtonPress) {QMouseEvent *mouseEvent = static_cast<QMouseEvent*>(event);if (mouseEvent->buttons() & Qt::LeftButton){emit imageLabelClicked();return true;}}}return QLineEdit::eventFilter(obj, event);
}

具体效果是：

PS:

建立了logedit的类后，上下连个输入框是两个不同的实例化类，因为已经有了imageClicked的信号，

对于该信号的处理可以有不同的方式，例如上面显示的，上一个输入行是箭头由上变成下，下面的是

变成了蓝色的键盘，在实际的qq登录是会弹出相应的菜单，这里只需要对该信号的处理机制进行编写

即可实现