QT學習（四）----360界面製做（1）

參照網上的資料，模仿了一份360新特效的界面。

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

360真實效果：（最好本身打開360看看！！）

 

先上效果圖。（純UI）

（如今沒有任何的功能，以後再陸續添加，這樣作比較好理解）

首先須要繪製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實現。

下一章實現窗口的拖拽等功能。