QT学习（四）----360界面制作（1）

参照网上的资料，模仿了一份360新特效的界面。

源代码在：http://download.csdn.net/detail/zhangyang1990828/5238013

360真实效果：（最好自己打开360看看！！）

先上效果图。（纯UI）

QT学习（四）----360界面制作（1）

（现在没有任何的功能，之后再陆续添加，这样做比较好理解）

首先需要绘制Frame，就是看到的整个窗口。它是由两个圆角矩形组合起来的。

绘制代码如下：

void DataBrain::paintEvent(QPaintEvent *)
{
QBitmap bitmap(this->size());//创建一个位图来存储这个组合体
QPainter painter(&bitmap);//创建一个类似于绘画板的对象，通过它来在bitmap上绘图
painter.fillRect(bitmap.rect(),Qt::white);
painter.setBrush(QColor(0,0,0));
        painter.drawRoundRect(QRect(0,2,this->width(),this->height()-2),5,5);
painter.drawRoundRect(QRect(20,0,100,2),2,2);
setMask(bitmap);//将画好的bitmap遮挡在屏幕前方
}

这样就绘制好了整个窗口的Frame，之后需要做的就是在这个Frame上贴图制作模糊透明效果的按钮。

背景其实就是将两张图片分别存储到两个label中，让后通过setGeometry将label放到指定的位置。两张是因为之后要实现动态的效果，所以要两张。（往后看就明白了）

上代码：

void DataBrain::createFrame()
{
this->setWindowTitle(tr("DataBrain"));
this->resize(QSize(WINDOW_WIDTH,WINDOW_HEIGHT));
setWindowFlags(Qt::FramelessWindowHint);//设置窗口的样式

m_pLabelBkTop=new QLabel(this);
m_pLabelBkTop->setPixmap(QPixmap(":/images/images/bg_top.png"));
m_pLabelBkTop->setGeometry(QRect(0,2,this->width(),this->height()-2));//在目标区域显示label

m_pLabelBkBottom=new QLabel(this);
m_pLabelBkBottom->setPixmap(QPixmap(":/images/images/bg_bottom.png"));
m_pLabelBkBottom->setGeometry(QRect(0,2,this->width(),this->height()-2));

}

为了实现最后的拖动效果，我们需要将前景的四张拖动出现的图合并成一张。

窗口上的显示“360安全桌面”“木马防火墙”..的按钮的实现，我们将这种按钮抽象成一个类，方便以后的调用。
之后只要将这类按钮的对象布局到这个窗口上就实现了前面实现的效果了（纯UI）。

按钮类里的函数：（不贴全部代码了，需要的去http://download.csdn.net/detail/zhangyang1990828/5238013下载

void DataBrain::createWidget()//四张图片合并一个pixmap
{
QPixmap pixmap(QSize(this->width()*WINDOW_PAGE_COUNT,WINDOW_HEIGHT-2));
QPainter painter(&pixmap);
for(int i=0;i<WINDOW_PAGE_COUNT;i++)
{
painter.drawImage(QRect(WINDOW_WIDTH*i,0,WINDOW_WIDTH,WINDOW_HEIGHT-2),QImage(tr(":/images/images/desktop_%1.jpg").arg(i)));
}

    m_pLabelFg=new QLabel(this);
    m_pLabelFg->resize(pixmap.size());
m_pLabelFg->setPixmap(pixmap);
m_pLabelFg->move(WINDOW_START_X,WINDOW_START_Y);

QStringList nameList;
nameList << tr("360安全桌面 ")
     << tr("木马防火墙  ")
     << tr("360保镖     ")
     << tr("电脑门诊    ");
for(int i=0;i<WINDOW_BUTTON_COUNT;i++)
{
CLabel *label=new CLabel(this);
label->resize(QSize(155,45));
label->setPixmap(QPixmap(tr(";/images/images/btn_%1.png").arg(i)));
label->setText(nameList.at(i));
label->move(8+i*170,319);
        m_pLabelBtnArray[i]=label;

}
m_pCloseBtn=new QToolButton(this); //关闭按钮
m_pCloseBtn->setFocusPolicy(Qt::NoFocus);
m_pCloseBtn->setStyleSheet("background:transparent;border:0px;");
setButtonIcon(m_pCloseBtn, EButtonMouseDefault);
m_pCloseBtn->move(QPoint(this->width()-52,1));

//raise widget
m_pLabelBkTop->raise();
m_pCloseBtn->raise();

for (int i = 0; i < WINDOW_BUTTON_COUNT; i++)
{
m_pLabelBtnArray[i]->raise();
}
}
void DataBrain::createFilter()
{

}
void DataBrain::setButtonIcon(QToolButton *btn, EButtonMouseState state)
{
QPixmap pixmap(":/images/images/btn_close.png");//自定义关闭按钮
int nWidth = pixmap.width()/4;
int nHeight = pixmap.height();
btn->setIcon(QIcon(pixmap.copy(QRect(state * nWidth, 0, nWidth, nHeight))));
btn->setIconSize(QSize(nWidth, nHeight));
}

这样就完成了360新特性界面的纯UI实现。

下一章实现窗口的拖拽等功能。

秒客网

QT学习（四）----360界面制作（1）

相关文章