QT---通過樣式表設計程式介面ui
阿新 • • 發佈:2019-02-16
在qt中單單是採用qt提供的控制元件設計出來的程式介面是不堪入目的,是遠遠不夠的。程式使用者們都是希望有一個更好看的ui介面,獲得良好的體驗。所以往往需要自己設計的圖示代替qt自身提供的控制元件。我這裡推薦一個較為方便的方式---通過樣式表設計ui介面。
比如qt中我們最常用到的QPushButton類,我們可以作出如下改變:
如上圖所示,我對幾個QPushButton類進行了改變,使其看起來不會很生硬。經過以下幾個步驟就可以實現:
1. 在專案中新增新的資原始檔,將所用到的ui介面圖示放到資原始檔夾中,比如我放置的路徑是在:/images/...下;
2. 開啟×××.ui檔案,右鍵一個QPushButton 後選擇“改變樣式表”->新增資源(旁邊的下三角形)
3. 在***.cpp檔案中加入ui初始化的程式碼說明,比如:
ui->pushButton_volSub->setStyleSheet("QPushButton{border-image: url(:/images/14-02.png)}" "QPushButton:pressed{border-image: url(:/images/14-01.png)}"); ui->pushButton_volAdd->setStyleSheet("QPushButton{border-image: url(:/images/16-02.png)}" "QPushButton:pressed{border-image: url(:/images/16-01.png)}");
如上我設定的就是音量加減圖示的一個點選效果,點選一次切換一下圖示,以此來表示觸發了一次音量加(或是減)的事件。
或是控制元件可用和不可用狀態下,呈現出不同的樣式:
ui->pushButton_1->setEnabled(true); ui->pushButton_1->setStyleSheet("QPushButton{border-image: url(:/images/81.png);}"); ui->pushButton_2->setEnabled(false); ui->pushButton_2->setStyleSheet("QPushButton{border-image: url(:/images/67.png);}");
還有比如需要一個QLabel去除它的外框,並且是其字型的顏色為白色(可以根據需要隨意設定),可以:
ui->label->setStyleSheet("border: none; color: rgb(255, 255, 255);");
注意:最好設定控制元件的尺寸和圖示的尺寸一致,不會導致圖示變形,避免影響美觀。
這是一種直接通過改變ui檔案中控制元件的樣式表來設計介面,相對而言比較簡單。
順便一提,如果要改變應用的背景,可以使用如下程式碼:
//背景
QPalette palette;
palette.setBrush(QPalette::Background, QBrush(QImage(":/images/01.png")));
this->setPalette(palette);
還有隱藏控制元件或是全屏顯示,可以:
//隱藏QSlider
ui->verticalSlider->setHidden(true);
//全屏顯示
showFullScreen();