0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內(nèi)不再提示

Qt這四種設置窗體背景的方法,都知道嗎?

嵌入式小生 ? 來源:嵌入式小生 ? 2023-02-01 11:41 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

一、導讀

哇,一個軟件界面的顏值是引人注目的焦點,這些“超凡脫俗”的東西是開發(fā)人員的杰作嗎?說是但也不是,首先軟件界面會由專業(yè)的人員迸發(fā)靈感的去設計和美化,接著才是開發(fā)人員的場地,如果沒有美化的步驟,放幾個按鈕和文本就搞定啦,這也太...。

對于Qt來說,所有的可視小部件的基類都是QWidget:

f591abe6-a1e1-11ed-bfe3-dac502259ad0.png

如何為一個界面加入設計好的背景圖則是界面美化的核心操作之一,實現(xiàn)的方法有多種,本文將總結(jié)幾種常使用的方法。對于如何“挖框貼圖”則需要根據(jù)具體的界面內(nèi)容來定,沒有統(tǒng)一的方法了。

二、方法實現(xiàn)

(2-1)使用paintEvent()實現(xiàn)

paintEvent()是QWidget的一個虛函數(shù):

voidQWidget::paintEvent(QPaintEvent*event)

則可以重載這個函數(shù),然后在這個函數(shù)中使用QPainter設置背景圖片。如下代碼:

voidWidget::paintEvent(QPaintEvent*event)
{
Q_UNUSED(event)

QPainterpainter(this);

painter.setRenderHint(QPainter::Antialiasing);

painter.drawPixmap(rect(),QPixmap(":/images/bk.png"));
}

效果如下:

f5b37ece-a1e1-11ed-bfe3-dac502259ad0.png

該種方式本質(zhì)上是利用繪制事件來完成的,繪制事件是一個請求,用于重新繪制全部或部分小部件。發(fā)生在以下幾種情況下:

1、repaint()或update()被調(diào)用。

2、小部件由遮擋變?yōu)轱@示的情況。

3、一些未知的情況,哈哈。

為了提高性能,可以使用QPixmap提前將待繪制的圖片加載進來,然后進行繪制。

(2-2)使用樣式表實現(xiàn)

樣式表是Qt的一大亮點,可以使用setStyleSheet()設置樣式表來設置窗體的背景圖,代碼如下:

Widget::Widget(QWidget*parent)
:QWidget(parent),
ui(newUi::Widget)
{
ui->setupUi(this);

setAttribute(Qt::WA_StyledBackground);

this->setStyleSheet("border-image/images/bk.png)");
}

(2-3)使用QLabel實現(xiàn)

在QLabel這個標簽類中有一個void setPixmap(const QPixmap &)可用于為QLabel設置一個Pixmap,所以可以使用這種方法設置背景圖:把QLabel的大小設置成與窗體的大小一樣,然后使用setPixmap設置背景圖片即可,這樣QLabel的背景圖就會完全填充整個窗體的背景。

這種方法在需要拼接的窗體背景中較為常用。例如下圖是一個由五個QLabel拼接的界面:

f5c00cc0-a1e1-11ed-bfe3-dac502259ad0.png

如果想要設置背景圖片(此處準備了一張背景圖top_bk.png),使用下述代碼即可(此處設置一個QLabel,其他的一樣):

ui->label->setPixmap(QPixmap(":/images/top_bk.png"));

效果如下:

f5f3b0d4-a1e1-11ed-bfe3-dac502259ad0.png

注意:使用QLabel進行背景圖片拼接時,必須要保證QLabel的大小與待拼接的圖片的大小一樣,才能顯示出完整的效果。

(2-4)使用QPalette實現(xiàn)

可以直接在構(gòu)造函數(shù)中使用QPalette設置背景圖片,如下代碼:

QPalettepalette=this->palette();
palette.setBrush(QPalette::Window,QBrush(QPixmap(":/images/bk.png")));
this->setPalette(palette);

效果如下圖所示:

f6199dda-a1e1-11ed-bfe3-dac502259ad0.png

三、小生總結(jié)

文本總結(jié)了四種設置窗體背景圖片的方法,在實際項目開發(fā)過程中,小生對QPainter情有獨鐘,感覺萬物皆可QPainter,所以特別喜歡使用paintEvent()來設置背景圖片:對于完整的背景圖片,可以直接在代碼中使用這種方法來實現(xiàn);對于需要拼接的背景圖片,小生習慣使用paintEvent()+QLabel來實現(xiàn)。用樣式表設置背景圖片的方法也會使用到,對于QPlalette設置背景圖這種方式較少使用。

殊途同歸,選擇一種喜歡的方法使用即可,目前硬件性能對于軟件來說,還是有極強的支持性和剩余性能,故個人認為一般情況下不必過多考慮性能方面的影響。

審核編輯:湯梓紅

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學習之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 界面
    +關(guān)注

    關(guān)注

    0

    文章

    59

    瀏覽量

    15805
  • 函數(shù)
    +關(guān)注

    關(guān)注

    3

    文章

    4377

    瀏覽量

    64553
  • 代碼
    +關(guān)注

    關(guān)注

    30

    文章

    4894

    瀏覽量

    70448
  • Qt
    Qt
    +關(guān)注

    關(guān)注

    2

    文章

    314

    瀏覽量

    38961
  • 窗體
    +關(guān)注

    關(guān)注

    0

    文章

    10

    瀏覽量

    1525

原文標題:Qt這四種設置窗體背景的方法,都知道嗎?

文章出處:【微信號:嵌入式小生,微信公眾號:嵌入式小生】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點推薦

    SPI究竟為什么要搞出四種模式呢?

    小弟最近在學習SPI協(xié)議,知道了根據(jù)CPOL和CPHA的不同,SPI有4模式,可是沒有想通究竟為什么要搞出四種模式呢?大家都統(tǒng)一成其中的一
    發(fā)表于 03-07 15:10

    IO口的四種使用方法

    IO口的四種使用方法高阻態(tài)的典型應用
    發(fā)表于 01-12 07:16

    IO口的四種使用方法

    IO口的四種使用方法高阻態(tài)的典型應用
    發(fā)表于 02-02 06:58

    IO口的四種使用方法

    IO口的四種使用方法高阻態(tài)的典型應用
    發(fā)表于 02-19 07:23

    教你四種神奇的電腦開機方法

    教你四種神奇的電腦開機方法 如果有人問你,你的電腦怎么開機?回答不外乎是:“直接按電腦機箱上的電源開關(guān)按鈕不就得了”。當然是最簡
    發(fā)表于 02-23 15:20 ?1109次閱讀

    電池的危害有哪些,你知道嗎?

    電池的危害有哪些,你知道嗎?,學習資料,感興趣的可以瞧一瞧。
    發(fā)表于 10-26 17:00 ?0次下載

    無線充電IC你知道嗎

    無線充電IC你知道嗎
    發(fā)表于 01-22 19:37 ?47次下載

    Qt5主窗體的詳細中文資料免費下載

    本文檔的主要內(nèi)容詳細介紹的是Qt5主窗體的詳細中文資料免費下載內(nèi)容包括了:Qt 5主窗體構(gòu)成,Qt 5文件操作功能,
    發(fā)表于 08-01 08:00 ?0次下載
    <b class='flag-5'>Qt</b>5主<b class='flag-5'>窗體</b>的詳細中文資料免費下載

    MIUI的10個小設置知道嗎

    其實在MIUI里,藏著很多個性化的選擇,接下來的10個小設置,你知道嗎
    的頭像 發(fā)表于 05-08 16:53 ?4587次閱讀

    基于STM32的多種printf用法 你知道嗎

    基于STM32的多種printf用法,你知道嗎?
    的頭像 發(fā)表于 02-29 17:02 ?4980次閱讀

    熱敏電阻的四種常見作用,你知道嗎資料下載

    電子發(fā)燒友網(wǎng)為你提供熱敏電阻的四種常見作用,你知道嗎資料下載的電子資料下載,更有其他相關(guān)的電路圖、源代碼、課件教程、中文資料、英文資料、參考設計、用戶指南、解決方案等資料,希望可以幫助到廣大的電子工程師們。
    發(fā)表于 04-02 08:49 ?6次下載
    熱敏電阻的<b class='flag-5'>四種</b>常見作用,你<b class='flag-5'>都</b><b class='flag-5'>知道嗎</b>資料下載

    四種方法實現(xiàn)LED點亮

    四種方法實現(xiàn)LED點亮程序分享
    發(fā)表于 12-28 10:03 ?3次下載

    干貨 | 數(shù)字萬用表四種妙用方法,你知道么?

    干貨 | 數(shù)字萬用表四種妙用方法,你知道么?
    的頭像 發(fā)表于 01-05 09:52 ?1350次閱讀

    無源與有源器件的這些區(qū)別你知道嗎?

    無源與有源器件的這些區(qū)別你知道嗎?
    的頭像 發(fā)表于 10-26 15:27 ?5274次閱讀
    無源與有源器件的這些區(qū)別你<b class='flag-5'>都</b><b class='flag-5'>知道嗎</b>?

    pcb菲林是什么?5個作用你知道嗎

    pcb菲林是什么?5個作用你知道嗎
    的頭像 發(fā)表于 11-22 11:14 ?1.1w次閱讀