Qt貼圖與Qss快速入門(一)

點擊上方藍字可直接關注!方便下次閱讀。如果對你有幫助,麻煩點個在看或點個贊,感謝~

前兩次和大家分享了Qml繪製儀表盤、Qt自定義控件繪製儀表盤,我是更傾向使用Qml這種方式的。自定義控件使用到了定時器,如果有多個控件的話,那豈不是要使用很多定時器?還有就是對於界面前端本身不是要花特別多精力的地方,掌握通用的幾種方法就好。

這兩天學習了對Qt界面如何美化——QSS,按照我自己的思路仿了一個對初學者友好的Demo。參考對象是從github上下載的一個模仿360界面的,源碼較多,所以我按照自己的習慣仿照了一個極簡版的。

                                                   大佬的

                                                     我的

其實寫了這麼久的程序,我是不用樣式表的。主要注重功能,但想要成爲一名Qt開發工程師,樣式表是基本技能。

 

程序平臺:Windows、 Qt5.5.1(MinGW)

 一、 幾個界面類之間的關係

Dialog類是承載其他幾個類的基本。其他幾個類分別是MainTopWidgetMainBottomWidget以及SafeWidget。對應我的界面就是“立即體檢”的綠色部分、下面三個按鈕的灰色部分以及點擊第一個按鈕跳轉到的部分。

下載的程序是用純代碼寫的,但我的都是使用Qt Designer來做的。

 

    二、界面佈局以及簡單樣式表使用

1. MainTopWidget

MainTopWidget繼承自QWidget

這是直接在Widget中設置的樣式,要注意的是QWidget直接派生類的樣式表是不起作用的,原因是QWidgetpaintEvent()是空的,而樣式表要通過paint被繪製到窗口中。解決方法如下:

void MainTopWidget::paintEvent(QPaintEvent *)
{
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}

2. MainBottomWidget

MainBottomWidget也是直接繼承自QWidget

對按鈕設置樣式

    //從下往上 從右往左 從上往下 從左往右 數第n個像素的位置
    ui->pbn_safeCheck->setStyleSheet(
    "border-image:url(:/resource/safe_check)0 285 0 0");

這裏要提一下的是safe_check.png圖片是4張連在一起的,所以在設置樣式表時需要將圖片分割,取出需要使用的圖片,這裏面取出來的是第一張圖片。下面是設置完樣式之後的效果,彷彿開了美顏之後的自己、彷彿是化了妝後的自己~ 看來我之前寫的程序都是素顏的啊!

3. SafeWidget

SafeWidget也是直接繼承自QWidget

這裏面先說下,爲了要實現“動畫”的效果,分別對這幾個Widget設置了固定的尺寸以便讓它們按照我們設置的位置去移動。

這幾個窗體中,當點擊按鈕時,會將發出信號,在Dialog窗體中將信號與槽連接起來。

4. Dialog窗體

該窗體中主要實現了動畫的效果,還有就是將需要的信號和槽進行連接。

實現動畫的效果:

void Dialog::initAnim()
{
    QPropertyAnimation *m_upMainAnimation = new QPropertyAnimation(m_topWidget, "pos");
    m_upMainAnimation->setDuration(200);
    m_upMainAnimation->setStartValue(QPoint(0, 0));
    m_upMainAnimation->setEndValue(QPoint(0, -440));


    QPropertyAnimation *m_downMainAnimation = new QPropertyAnimation(m_bottomWidget, "pos");
    m_downMainAnimation->setDuration(200);
    m_downMainAnimation->setStartValue(QPoint(0, 440));
    m_downMainAnimation->setEndValue(QPoint(0, 600));


    m_upGroup = new QParallelAnimationGroup;
    m_upGroup->addAnimation(m_upMainAnimation);
    m_upGroup->addAnimation(m_downMainAnimation);


    QPropertyAnimation *m_upGarAnimation = new QPropertyAnimation(m_topWidget, "pos");
    m_upGarAnimation->setDuration(400);
    m_upGarAnimation->setStartValue(QPoint(0, -440));
    m_upGarAnimation->setEndValue(QPoint(0, 0));


    QPropertyAnimation *m_downGarAnimation = new QPropertyAnimation(m_bottomWidget, "pos");
    m_downGarAnimation->setDuration(400);
    m_downGarAnimation->setStartValue(QPoint(0, 600));
    m_downGarAnimation->setEndValue(QPoint(0, 440));


    m_downGroup = new QParallelAnimationGroup;
    m_downGroup->addAnimation(m_upGarAnimation);
    m_downGroup->addAnimation(m_downGarAnimation);
}

詳細的內容可以參考該鏈接:https://www.pressc.cn/63.html

三、 小結

現在的學習方式漸漸變爲以目的爲導向的學習,個人覺得這樣的方式可以做到快速提高,或者說就是以項目爲導向。然後再從項目中反思總結。

下次有時間會把這個Demo再完善一些,還會將樣式表寫入文件,這樣可以將樣式與界面設計分離。

 

最後的效果視頻如下:

插播一條廣告:

所有源碼均可通過公衆號後臺留言獲取。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章