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

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

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

大佬的

我的

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

程序平台：Windows、 Qt5.5.1(MinGW)

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

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

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

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

1. MainTopWidget

MainTopWidget繼承自QWidget。

這是直接在Widget中設置的樣式，要注意的是QWidget直接派生類的樣式表是不起作用的，原因是QWidget的paintEvent()是空的，而樣式表要通過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再完善一些，還會將樣式表寫入文件，這樣可以將樣式與界面設計分離。

最後的效果視頻如下：

http://mpvideo.qpic.cn/0bf2v4aamaaa5yalzc4aqrpfbl6da2xqabqa.f10002.mp4?dis_k=0a51312531674becf5a8e451af70b941&dis_t=1586226180

VirMach 便宜 VPS

QNews

QNews