1. 程式人生 > 其它 >關於在UI介面中繪製隨畫面大小變化而變化的背景(QT,PyQT)

關於在UI介面中繪製隨畫面大小變化而變化的背景(QT,PyQT)

一般情況下UI介面背景繪製的方式及優缺點

1. 直接在QTdesigner中使用純色或漸變背景

  • qtdesginer中設定純色背景和漸變色背景相對簡單,且樣式表中能很方便的通過調色盤,製作出你想要的的背景色和漸變色。

  • --漸變色調色盤,可以在樣式表中選擇新增漸變,點選創建制作新的漸變效果

  • --而且無論是漸變色還是純色都不需要擔心畫面大小變化的問題
  • --在樣式表中使用背景的時候,記得用{}限制使用者,不然其子類下所有的預設背景都會被替換成設定的背景
QMainWindow{background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(168, 35, 209, 255), stop:1 rgba(255, 255, 255, 255));}
  • 使用純色背景(或漸變色背景)我們的介面會顯得相對簡單,在一些極簡風格的軟體中能得到很好的效果,但其缺點也在這裡,純色(漸變色)背景過於簡單了,其在一些需要變化的場景下表現較差,特別是我們想使用一些藝術畫或者和行業相關的圖片作為背景的時候。

2. 直接在QTdesigner中呼叫素材作為背景

  • qt架構中可以使用qrc檔案作為載體,新增在畫面中顯示的標誌,背景等img素材,在UI繪製中我們同樣可以直接使用樣式表來設定介面背景。

  • --新增qrc檔案

  • --新增素材
  • --使用樣式表background-image新增背景
  • 使用該方法新增的背景圖片大小與原圖一致,當畫面大小變化超過圖片大小的時候,圖片會以平鋪的方式顯示在背景中,因此除了一些特殊設計的可以自拼接的圖片外,background這個名字裡帶著背景的新增方式反而不太適合。

  • --畫面小於圖片時,圖片顯示不全

  • --畫面大於圖片時,畫面以平鋪的形式複製顯示
  • 在樣式表中設定圖片,比較有效的選擇是使用border-image詞條新增背景,該方法不會出現背景重複的情況,背景隨畫面大小變化。

  • --畫面最大化時顯示情況

  • --背景隨畫面變化
  • 大部分情況下該設定方法可以滿足設計要求。

3. 通過重繪事件顯示背景

  • qt結構中很多想法都可以通過事件比較輕鬆的實現,利用繪製事件我們同樣達到使背景隨畫面變化的效果,甚至如果你的思路更廣,你可以利用重繪事件作出更好的畫面效果,比如背景隨畫面中顯示不同而變化。

  • --其在QT中呼叫如下:

void MainWindow::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.drawRect(MainWindow::rect());
    painter.drawPixmap(MainWindow::rect(),QPixmap(":/new/prefix1/timg2.jpg"));
}
  • --其在python中呼叫如下:
self.pixmap = QPixmap("timg2.jpg")  # 換成自己的圖片的相對路徑

def paintEvent(self, event):#
    try:
            painter = QPainter(self)
            painter.drawRect(self.rect())
            painter.drawPixmap(self.rect(), self.pixmap)
    except:
        pass
  • 利用QPixmap可以更方便的替換背景圖片。