转自:http://www.cnblogs.com/appsucc/archive/2012/03/26/2417267.html
这篇博文主要讲述360安全卫士工具栏的创建;工具栏由图片和文字组成,当鼠标移到工具栏按钮上时,需要有些特征表达该现象,如背景色变化等;当然鼠标单击工具栏按钮时,同样也要有些特征,并且这个特征区别于鼠标移到按钮上的特征;写起来有些拗口,我给大家先看看我实现的效果图。
单击按钮时和鼠标移到按钮上时,按钮背景会不同,并且单击其他按钮时,已单击的那个按钮背景应该恢复。下面讲解其具体实现。
一、工具栏的创建
工具栏当然是自定义的部件了(继承于QWidget),工具栏上的那些按钮都是继承于QToolButton;其中有9个按钮,最右边的是label;工具栏类的成员变量如下所示:
QList<MyBtn*> m_listMyBtnPoint;//自定义按钮 QList<QString> m_listMyStr;//按钮对应的文本 QLabel *m_pLabel;//label,显示logo
首先当然是创建这些子部件了,和一般的没啥区别:
//CreateWidget创建部件 void ToolBar::CreateWidget() { //文本例子 m_listMyStr<<"Examine"<<"KillTrojan"<<"CleanDust"<<"LeakRepair"<<"SysRepair" <<"CleanCom"<<"FunFull"<<"SoftMan"<<"OptSpeed"; //创建toolbutton for(int nIndex = 0;nIndex<WIDGET_CNT;++nIndex) { //图像资源路径 QString strImage = QString(":/image/%1.png").arg(nIndex+1); //创建自定义QToolButton(MyBtn) m_listMyBtnPoint.append(new MyBtn(strImage,m_listMyStr[nIndex],this)); //设置toolbutton的位置 m_listMyBtnPoint.at(nIndex)->move(nIndex*TOOLWIDGET_H+VALUE_DIS,0); //该信号槽设置其他按钮的按下状态bool值 connect(m_listMyBtnPoint.at(nIndex),SIGNAL(signal_parent(void*)),this,SLOT(slot_set(void*))); } //创建label m_pLabel = new QLabel(this); m_pLabel->setPixmap(QPixmap(":/image/logo.png")); }
工具栏里的按钮和label都是手动定位(即设置位置信息),所以重写了resizeEvent事件,在resizeEvent事件里进行部件定位,如下所示:
//resizeEvent void ToolBar::resizeEvent (QResizeEvent * event) { //按钮垂直居中 m_pLabel->move(rect().width()-m_pLabel->pixmap()->width()-VALUE_DIS,(rect().height()-m_pLabel->pixmap()->height())/2); }
大家可能会想:在resizeEvent事件里只对label进行定位了,那其他9个按钮了?因为其他9个按钮都是从最左边(也就是0)计算相对位移,而label是从最右边计算的,通过rect()函数获得工具栏的最右边位置信息;按钮在创建部件函数的时候就定位了位置,如果label也在那个时候定位位置的话是错误的,因为那是工具栏部件的大小是未知的,所以rect()函数返回的值也是未知的;当放在resizeEvent事件中进行处理时,工具栏部件显示出来的时候,其大小都是可以确定的。
二、工具栏按钮效果设置
工具栏按钮继承于QToolButton;首先是设置按钮的基本显示效果了,去掉Qt自带的效果;包括文本颜色,文本字体,样式大小等,这些在我前几篇的博文中有讲解;代码如下所示:
//构造函数 MyBtn::MyBtn(const QString &strImage,const QString &strInfo,QWidget *parent):QToolButton(parent), m_bOver(false),m_bPress(false),m_strImage(strImage),m_strInfo(strInfo) { //文本颜色 QPalette objPalette = palette(); objPalette.setColor(QPalette::ButtonText, QColor(220,220,220)); setPalette(objPalette); //文本粗体 QFont &objFont = const_cast<QFont &>(font()); objFont.setWeight(QFont::Bold); //样式 setStyleSheet("QToolButton{border:0px;}"); //大小 setIconSize(QSize(TOOLICON_WH,TOOLICON_WH)); resize(TOOLWIDGET_W,TOOLWIDGET_H); setToolButtonStyle(Qt::ToolButtonTextUnderIcon); //设置图像文本 setIcon(QPixmap(strImage)); setText(strInfo); //连接press信号槽,表示按钮按下时 connect(this,SIGNAL(pressed()),this,SLOT(slot_pressed())); }
OK,按钮的基本效果就出来了,按钮是透明的,只显示图片和文本,没背景信息。
再一步就是设置鼠标移到按钮上的效果了,鼠标移到按钮上时,背景呈现立体的半透明效果;当鼠标移上去时,设置移动标志(m_bOver)为ture,当鼠标离开按钮时,设置移动标志为false;然后各自update发出重绘事件请求即可。
//enterEvent--鼠标移到按钮上事件 void MyBtn::enterEvent(QEvent *event) { SetOver(true); } //leaveEvent--鼠标离开按钮事件 void MyBtn::leaveEvent(QEvent *event) { SetOver(false); } //SetOver void MyBtn::SetOver(bool bEnable) { if(bEnable!=m_bOver) { //设置m_bOver标志位 m_bOver = bEnable; //更新 update(); } }
在重绘事件里会对bOver进行判断来绘制鼠标移到按钮上的效果,后面讲解到重绘时再细节描述。
然后就是鼠标单击按钮时的效果了,和鼠标移到按钮上的实现原理基本一样;不过只是在槽函数中而不是由事件触发了;信号和槽函数在构造函数中已经被连接上了,槽函数如下:
//slot_pressed--槽函数 void MyBtn::slot_pressed() { SetPress(true); emit signal_parent(this); }
其中SetPress函数即设置按下标志(m_bPress)然后发送重绘请求。
//SetPress void MyBtn::SetPress(bool bEnable) { if(bEnable!=m_bPress) { //设置m_bOver标志位 m_bPress = bEnable; //更新 update(); } }
其中slot_pressed槽函数中发送了一个自定义信号signal_parent,在工具栏部件中会对该信号进行连接,其中信号的参数为按钮对象的指针。工具栏部件连接该信号的槽函数为slot_set函数:
//槽函数 void ToolBar:: slot_set(void *pObject) { for(int nIndex = 0;nIndex<WIDGET_CNT;++nIndex) { if(m_listMyBtnPoint.at(nIndex)!=pObject) { m_listMyBtnPoint.at(nIndex)->SetPress(false); } } }
总体意思是:例如有A,B,C三个按钮在工具栏中,如果按下了A按钮,这是按下B按钮时,发送信号给工具栏,然后在工具栏对应的槽函数中进行指针值对比,如果不是B按钮,就调用其他对应按钮的SetPress函数,并设置为false,这样A按钮就没有按下去的背景效果了(排他性)。
三、工具栏按钮效果绘制
绘制当然要在按钮的paintEvent事件处理函数中实现了,代码如下所示,代码注释的很详细,我就不多说了:
//重绘事件 void MyBtn::paintEvent(QPaintEvent *event) { QPainter painter(this); //如果按钮被按下 if(m_bPress) { //绘制被按下时的效果 painterinfo(150,200,&painter); } else if(m_bOver)//如果按钮没有被按下并且鼠标移到按钮上 { //绘制鼠标移到按钮上的按钮效果 painterinfo(50,100,&painter); } //调用基类的重绘事件以显示图像文本等 QToolButton::paintEvent(event); } //绘制背景渐变 void MyBtn::painterinfo(int nTopPartOpacity,int nBottomPartOpacity,QPainter *pPainter) { //设置画笔 QPen objPen(Qt::NoBrush,1); pPainter->setPen(objPen); //设置渐变画刷 QLinearGradient objLinear(rect().topLeft(),rect().bottomLeft()); //顶部颜色和透明度 objLinear.setColorAt(0,QColor(150,150,150,nTopPartOpacity)); //中间颜色和透明度 objLinear.setColorAt(0.5,QColor(50,50,50,255)); //底部颜色和透明度 objLinear.setColorAt(1,QColor(100,100,100,nBottomPartOpacity)); QBrush objBrush(objLinear); pPainter->setBrush(objBrush); //画圆角矩形 pPainter->drawRoundedRect(rect(),5,5); }
OK,这篇博文就写完了,下一篇博文主要讲解标题栏和状态栏的构建了。