QT學習（五）----360界面製做（2終結）

繼續上一章的360新特性界面。源代碼：http://download.csdn.net/detail/zhangyang1990828/5241242

上一章中實現了整個界面的純UI設計，此次咱們讓它生動起來。

QT學習（五）

首先讓「360安全桌面」「木馬防火牆」..這四個按鈕「動」起來。

讓這個按鈕有幾種狀態：

①鼠標進入時變成低亮高透明

②鼠標離開時恢復原狀

③鼠標點擊後變成高亮低透明

爲了實現這幾種狀態，須要三個事件和兩個變量：

enterEvent(QEvent* e);

leaveEvent(QEvent* e);

mousePressEvent(QMouseEvent* e);

m_mousePressFlag;

m_mouseEnterFlag;

經過這三個事件和兩個變量，就能夠實現按鈕的幾種狀態了。（還須要經過信號槽來實現只有一個按鈕被選中）

代碼：

 

connect(label, SIGNAL(signalLabelPress(CLabel*)), this, SLOT(slotLabelButtonPress(CLabel*)));

void DataBrain::slotLabelButtonPress(CLabel *label)
{
    for (int i = 0; i < WINDOW_BUTTON_COUNT; i++)
    {
        if (label != m_pLabelBtnArray[i])
        {
            m_pLabelBtnArray[i]->setMousePressFlag(false);
        }
    }
}

 

 

//按鈕特效
void CLabel::setMouseEnterFlag(bool flag)
{
    m_mouseEnterFlag=flag;
    this->update();
}
void CLabel::setMousePressFlag(bool flag)
{
    m_mousePressFlag=flag;
    this->update();
}
bool CLabel::getMouseEnterFlag()
{
    return m_mouseEnterFlag;
}
bool CLabel::getMousePressFlag()
{
    return m_mousePressFlag;
}
void CLabel::enterEvent(QEvent *e)
{
    if(!getMousePressFlag())
    {
        setMouseEnterFlag(true);
    }
    this->setCursor(Qt::PointingHandCursor);//設置鼠標的形狀
}
void CLabel::leaveEvent(QEvent *e)
{
    setMouseEnterFlag(false);
}
void CLabel::mousePressEvent(QMouseEvent *e)
{
    if(e->button()==Qt::LeftButton)
    {
        setMousePressFlag(true);
        emit signalLabelPress(this);
    }
}

效果圖：

 

ok！咱們繼續來實現右上角關閉按鈕的動態的效果。

和上面的相同，關閉的按鈕也是須要三個狀態：

 

①鼠標進入時

②鼠標離開時

③鼠標點擊後

不一樣的是，關閉按鈕不是對按鈕設置樣式，而是對它進行更換圖片。

這裏值得一提的是，這裏用的eventFilter（事件過濾器），對某個控件install一個eventFiler後，能夠在eventFilter的事件中經過傳遞進來的兩個參數（QObject*，QEvent*）來對事件進行控制。

十分簡單，上代碼：

 

//關閉按鈕的效果
void DataBrain::createEventFilter()
{
    m_pCloseBtn->installEventFilter(this);
}
bool DataBrain::eventFilter(QObject *target , QEvent *event)
{
    EButtonMouseState state=EButtonMouseNone;

    if(target==m_pCloseBtn)
    {
        if(event->type()==QEvent::Enter)
        {
            state=EButtonMouseEnter;
        }
        else if(event->type()==QEvent::Leave)
        {
            state=EButtonMouseDefault;
        }
        else if(((QMouseEvent*)event)->button()==Qt::LeftButton)
        {
            if(event->type()==QEvent::MouseButtonPress)
            {
                state=EButtonMousePress;
            }
            else if (event->type()==QEvent::MouseButtonRelease)
            {
                state = EButtonMouseEnter;
            }
        }
        if(state!=EButtonMouseNone)
        {
            setButtonIcon((QToolButton*)target,state);
        }
    }
    return QWidget::eventFilter(target, event);
}
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));
}

connect(m_pCloseBtn,SIGNAL(clicked()),qApp,SLOT(quit()));//給按鈕加上關閉程序的功能

效果圖：

 

最後來實現窗口的推拽功能（點擊串口上的一部份內能夠拖動窗口）和主頁面選擇頁的拖拽（頁面選擇以及按鈕選擇的變換）

這裏是整個設計中最複雜的地方！

首先須要先肯定要完成窗口拖拽和主頁面選擇須要抽象出幾個方法，怎樣劃分這些方法

①鼠標被按下事件mousePressEvent，在這裏須要去判斷鼠標的左鍵和右鍵，左鍵的話按下的區域是在窗口拖拽區仍是在主頁選擇區，這裏須要注意的是，關閉按鈕也在窗口拖拽區，須要在關閉按鈕的的點擊事件將窗口拖拽的flag設置成false。完成這個類須要m_mouseMoveWindowFlag（窗口是否能被拖拽的flag），m_mousePressFlag（主窗口可否被拖拽的flag）兩個flag；右鍵的話判斷當前的主頁面是否能向左滾動，須要setLabelMove和getLabelMove進行設置和讀取m_labelMoveFlag來對主頁面能被向左移仍是向右移進行flag。m_labelMoveFlag=flase能向右移不能向左移，m_labelMoveFlag=true能向左移不能向右移。（這裏的左移和右移指的是整頁的移動）

②鼠標移動的事件mouseMoveEvent，在這裏須要進行判斷m_mouseMoveWindowFlag和m_mousePressFlag，經過這兩個標識去完成是進行窗口的移動仍是主頁面的拖拽。（這裏須要注意的是，這裏的移動是拖拽，須要進行不斷的事件響應，才能出現拖拽的效果。）

③鼠標的按鍵釋放事件mouseReleaseEvent，在這裏須要對m_mouseMoveWindowFlag和m_mousePressFlag進行判斷，看剛結束的鼠標按鍵按下和釋放過程當中作了什麼，若是m_mousePressFlag=true，則幹才進行了主頁面的拖拽，須要經過鼠標按鍵按下時鼠標的座標和釋放時鼠標的座標來進行判斷鼠標拖拽的方向，再經過moveCurrentPage（整頁移動的函數）來完成頁面的滾動；若是m_mousePressFlag=false，則剛纔進行了窗口移動事件，須要在這裏從新將m_mouseMoveWindowFlag設置成false。

③整頁移動的函數moveCurrentPage，經過起始點的座標和終點的座標來判斷滾動的方向。若是沒有鼠標的拖動，而是經過鼠標右鍵或者快捷鍵來實現的頁面滾動，則直接進行頁面滾動。

④拖拽主頁面到新的頁面時，須要用改變當前選擇按鈕的函數changeCurrentButton，須要在這裏調用CButton的setMousePressFlag函數從新對選中按鈕進行設定。

⑤slotChangeCurrentPage函數，須要對點擊按鈕的事件進行響應，點擊按鈕則主頁面進行響應的滾動

⑥快捷鍵的響應keyPressEvent，這裏對快捷鍵進行設置。

OK!明白了以上的就能夠了，代碼：

 

//窗口拖拽
void DataBrain::mousePressEvent(QMouseEvent *e)
{
    if(e->button()==Qt::LeftButton)
    {
        m_mouseSrcPos=e->pos();
        if(m_mouseSrcPos.y()<=40)
        {
            m_mouseMoveWindowFlag=true;
        }
        else
        {
            m_currentFgXpos=m_pLabelFg->x();
            m_mousePressFlag=true;
        }
    }
    //右鍵左移
    else if(e->button()==Qt::RightButton)
    {
        if(getLabelMove())
        {
            if(m_currentFgIndex>0)
            {
                m_currentFgIndex--;
                moveCurrentPage(false);
            }
        }
    }
}
inline void DataBrain::setLabelMove(bool enable)
{
    m_labelMoveFlag = enable;
}

inline bool DataBrain::getLabelMove()
{
    return m_labelMoveFlag;
}
void DataBrain::moveCurrentPage(bool direction)
{
    int currentXpos = 0;//當前label的x座標
    int destXpos = 0;//目標x座標

    //改變當前頁面對應的按鈕
    changeCurrentButton();

    //圖片的幾個分割點
    //0-680, 680-1360, 1360-2040, 2040-2720
    //真:向左移;  假:向右移
    if (direction)
    {
        //左移的幾種可能性,對於x座標
        //index=0, 將label移動到-680*0
        //index=1, 將label移動到-680*1
        //index=2, 將label移動到-680*2
        //index=3, 將label移動到-680*3
        setLabelMove(false);
        currentXpos = m_pLabelFg->x();
        destXpos = -WINDOW_WIDTH * m_currentFgIndex;
        while(currentXpos > destXpos)//平滑滾動效果
        {
            m_pLabelFg->move(currentXpos-WINDOW_PAGE_MOVE, WINDOW_START_Y);
            currentXpos = m_pLabelFg->x();
            qApp->processEvents(QEventLoop::AllEvents);//依然保持監聽事件
        }
        m_pLabelFg->move(destXpos, WINDOW_START_Y);//確保最後移到指定的位置
        setLabelMove(true);
    }
    else
    {
        //右移的幾種可能性,對於x座標,與左移一致
        //index=0, 將label移動到-680*0
        //index=1, 將label移動到-680*1
        //index=2, 將label移動到-680*2
        //index=3, 將label移動到-680*3
        setLabelMove(false);
        currentXpos = m_pLabelFg->x();
        destXpos = -WINDOW_WIDTH * m_currentFgIndex;
        while(currentXpos < destXpos)
        {
            m_pLabelFg->move(currentXpos+WINDOW_PAGE_MOVE, WINDOW_START_Y);
            currentXpos = m_pLabelFg->x();
            qApp->processEvents(QEventLoop::AllEvents);
        }
        m_pLabelFg->move(destXpos, WINDOW_START_Y);
        setLabelMove(true);
    }
}
void DataBrain::changeCurrentButton()
{
    for (int i = 0; i < WINDOW_BUTTON_COUNT; i++)
    {
        if (i != m_currentFgIndex)
        {
            m_pLabelBtnArray[i]->setMousePressFlag(false);
        }
        else
        {
            m_pLabelBtnArray[i]->setMousePressFlag(true);
        }
    }
}
void DataBrain::slotChangeCurrentPage(CLabel *label)
{
    int index = 0;

    for (int i = 0; i < WINDOW_PAGE_COUNT; i++)
    {
        if (label == m_pLabelBtnArray[i])
        {
            index = i;
            break;
        }
    }

    //移動的幾種可能性,對於x座標
    //index=0, 將label移動到-680*0
    //index=1, 將label移動到-680*1
    //index=2, 將label移動到-680*2
    //index=3, 將label移動到-680*3
    //點擊左邊的按鈕 右移
    if (index < m_currentFgIndex)
    {
        while(index != m_currentFgIndex)
        {
            m_currentFgIndex--;
            moveCurrentPage(false);
        }
    }
    else if (index > m_currentFgIndex) //點擊右邊的按鈕 左移
    {
        while(index != m_currentFgIndex)
        {
            m_currentFgIndex++;
            moveCurrentPage(true);
        }
    }
}
void DataBrain::mouseMoveEvent(QMouseEvent *e)
{
    int x = 0;

    if (m_mousePressFlag)
    {
        if (getLabelMove())
        {
            m_mouseDstPos = e->pos();
            x = m_mouseDstPos.x() - m_mouseSrcPos.x();

            setLabelMove(false);
            m_pLabelFg->move(m_currentFgXpos + x, WINDOW_START_Y);
            setLabelMove(true);
        }
    }
    else if (m_mouseMoveWindowFlag)
    {
        m_mouseDstPos = e->pos();
        this->move(this->pos() + m_mouseDstPos - m_mouseSrcPos);
    }
}
void DataBrain::mouseReleaseEvent(QMouseEvent *e)
{
    int xpos = 0;

    if (m_mousePressFlag)
    {
        if (getLabelMove())
        {
            m_mouseDstPos = e->pos();

            xpos = m_mouseDstPos.x() - m_mouseSrcPos.x();

            if (xpos > 0)//右移
            {
                if (xpos >= WINDOW_ONEBUTTON_WIDTH)
                {
                    if (m_currentFgIndex > 0)
                    {
                        m_currentFgIndex--;
                        moveCurrentPage(false); //右移
                    }
                    else
                    {
                        moveCurrentPage(true); //左移
                    }
                }
                else
                {
                    moveCurrentPage(true); //左移
                }
            }
            else //左移
            {
                if (xpos <= -WINDOW_ONEBUTTON_WIDTH)
                {
                    if (m_currentFgIndex < WINDOW_PAGE_COUNT-1)
                    {
                        m_currentFgIndex++;
                        moveCurrentPage(true); //左移
                    }
                    else
                    {
                        moveCurrentPage(false); //右移
                    }
                }
                else
                {
                    moveCurrentPage(false); //右移
                }
            }

            m_mousePressFlag = false;
        }
    }
    else if (m_mouseMoveWindowFlag)
    {
        m_mouseMoveWindowFlag = false;
    }
}
//快捷鍵
void DataBrain::keyPressEvent(QKeyEvent *e)
{
    if (getLabelMove())
    {
        switch(e->key())
        {
        case Qt::Key_Left:
        case Qt::Key_Up:
            if (m_currentFgIndex > 0)
            {
                m_currentFgIndex--;
                moveCurrentPage(false); //右移
            }
            break;

        case Qt::Key_Right:
        case Qt::Key_Down:
            if (m_currentFgIndex < WINDOW_PAGE_COUNT-1)
            {
                m_currentFgIndex++;
                moveCurrentPage(true); //左移
            }
            break;

        default:
            break;
        }
    }
}

代碼有點長，須要所有代碼的能夠去 http://download.csdn.net/detail/zhangyang1990828/5241242下載源代碼。效果圖就不上了，和360的新特性差很少。

 

經過這樣一個例子，我想對於整個Qt的機制有了必定的瞭解吧，之後有好例子還會與你們分享的。