QT樣式設計
- 一、QT工程中添加資源文件
- 1.資源文件:
- 2. 添加步驟:
- 3. 新增資源文件以及刪除現有的資源文件
- 4. 使用資源文件
- 二、QT中的qss語句(樣式設計語句)
- 1. 樣式設計
- 2.常見的qss語句
- 示例代碼:
一、QT工程中添加資源文件
1.資源文件:
指的是QT程序中需要用到的素材(比如:圖片,音頻,視頻)
2. 添加步驟:
- 在QT工程中新建一個文件夾,把需要的資源(圖片)全部存放到該文件夾中
- 右鍵點擊工程名,選擇添加add new–》選擇QT–》QT resource file(資源文件)
- 點擊添加–》添加前綴(add prefix),然后再次點擊添加–》添加文件(add files),把之前你準備好的資源添加進來并保存即可在左邊欄生成資源文件
3. 新增資源文件以及刪除現有的資源文件
- 新增資源文件:右鍵點擊資源文件最頂層的目錄名,選擇添加現有文件即可
- 刪除現有的資源文件:右鍵點擊資源文件名,選擇刪除文件即可
4. 使用資源文件
- 右鍵點擊組件–》選擇改變樣式表–》選擇添加資源(三種不同的圖片樣式背景圖片、邊框圖片,圖片)
二、QT中的qss語句(樣式設計語句)
1. 樣式設計
\quad 指的是讓界面設計得更加好看(比如:文字顏色,背景圖片,改變倒角,文字對齊…)
QT中的樣式設計,就跟計算機前端(css)中設計網頁的樣式類似
右鍵改變樣式表–》打開QT的樣式編輯器(有局限性,只能讓你設置四種樣式)–》添加資源,添加漸變色,添加顏色,添加字體
如果你要設置其它樣式,需要程序員自己寫代碼(把所知道的qss語句寫在樣式表的下面)
2.常見的qss語句
紅 綠 藍
background-color: rgb(85, 255, 255); //設置背景顏色(按鈕,標簽的背景顏色)
color: rgb(85, 255, 255); //設置前景色(文字的顏色)
background-image: url(:/new/prefix1/pic/3.jpg); //設置背景圖片(不會拉伸圖片)background-image: url(你需要的圖片的絕對路徑);background-image: url(:你的資源文件的路徑名);區別:如果使用絕對路徑,就不需要加冒號如果使用資源文件的路徑就需要加冒號
border-image: url(:/new/prefix1/pic/2.jpg); //設置邊框圖片(邊框圖片跟組件的大小保持一致)border-image: url(你需要的圖片的絕對路徑);
border-radius:15px; //把倒角設置為15個像素倒角的大小不能超過組件高度的一半
border:2px solid#ff0000; //把邊框的寬度設置為2個像素,顏色設置成ff0000
QPushButton:pressed{ 設置按鈕按下的時候背景圖片,主界面的樣式中使用background-image: url(:/button_down.png);
}
QPushButton:pressed#regBt{ 設置指定按鈕regBt按鈕按下時候背景圖片,主界面的樣式中使用background-image: url(:/button_down.png);
}
QPushButton:hover{ 主界面的樣式中使用background-color:#ff00ff; 鼠標進入控件設置背景顏色
}
QMainWindow{border-image: url(:/new/prefix1/pic/3.jpg);} //讓圖片只作用于主窗口
注意:
- QT中路徑的寫法跟window不一樣
比如:window路徑 C:\Users\PC\Desktop\share
QT中要求改寫成: C:/Users/PC/Desktop/share
QT工程存儲的路徑不可以使用中文路徑,但是QT的代碼中可以使用中文路徑 - 資源文件路徑名跟非資源文件路徑名寫法的區別
資源文件路徑名: 冒號/new/prefix1/image/某張圖片
比如: :/new/prefix1/image/3.jpg
非資源文件路徑名: C:/Users/Administrator/Desktop/share/1jpeg
示例代碼:
loginwin::loginwin(QWidget *parent): QMainWindow(parent), ui(new Ui::loginwin)
{ui->setupUi(this);//通過寫代碼把登錄界面的ui做出來//第一步:標簽//父窗口:這個組件(控件)等一會在哪個窗口上顯示,這個窗口就是父窗口QLabel *lb1=new QLabel("學生管理系統",this);//設置按鈕的坐標,寬高/*規律:任何組件,屬性都有對應的設置方法,方法的名字統一叫做setxxx()比如:屬性geometry --》對應的方法setGeometry()*/lb1->setGeometry(200,10,400,100);QFont myfont("楷體",24);lb1->setFont(myfont);//設置樣式lb1->setStyleSheet("color:rgb(255,0,0);");//第二步:兩個單行輸入框QLineEdit *le1=new QLineEdit(this);QLineEdit *le2=new QLineEdit(this);//設置坐標,寬高le1->setGeometry(220,130,300,50);le2->setGeometry(220,220,300,50);//設置默認提示文字le1->setPlaceholderText("請輸入用戶名");le2->setPlaceholderText("請輸入密碼");//設置用戶名,密碼位數le1->setMaxLength(8);le2->setMaxLength(8);//設置密碼隱藏le2->setEchoMode(QLineEdit::Password);//設置樣式le1->setStyleSheet("border:2px solid#ff0000;");le2->setStyleSheet("border:2px solid#ff0000;");//設置字體le1->setFont(myfont);le2->setFont(myfont);//第三步:兩個按鈕QPushButton *bt1=new QPushButton("登錄",this);QPushButton *bt2=new QPushButton("注冊",this);bt1->setFont(myfont);bt2->setFont(myfont);//設置坐標,寬高bt1->setGeometry(200,300,100,50);bt2->setGeometry(450,300,100,50);//給主窗口設置邊框圖片this->setStyleSheet("QMainWindow{border-image: url(C:/Users/Administrator/Desktop/share/4.jpeg);}");
}