使用Qt繪制一個(gè)簡(jiǎn)約美觀的界面-使用QSS簡(jiǎn)單美化

基本控件布局

以繪制登錄界面為例，創(chuàng)建一個(gè)繼承自Qwidget的設(shè)計(jì)師界面類

為了使得控件排放整齊有序，可以使用layout布局進(jìn)行輔助

1. 首先，添加控件，然后按照類似css的頁(yè)面布局方式，在控件下方添加一Vertical Spacer墊片，用于控制該控件與其他控件的下邊距（如果不希望邊距改變，可以將V Spacer的sizeType設(shè)置為Fixed）
2. 將 控件 和 控件下方的V Spacer 一起加入一個(gè)Vertical Layout垂直布局中
3. 在該布局的左右兩端加入兩個(gè)Horizontal Spacer墊片，用于設(shè)置該布局與其上一級(jí)布局 或 Widget / Frame 等窗體的左右邊距

效果如下：

（注意：直接將控件放入布局中往往會(huì)導(dǎo)致其被拉長(zhǎng)變形

如果要固定控件的尺寸，可以直接設(shè)置控件的最小尺寸 setMinimumSize(500,50)，然后設(shè)置控件的尺寸策略 setSizePolicy(QSizePolicy::Fixed,QSizePolicy::Fixed) 為長(zhǎng)寬固定【可以直接在設(shè)計(jì)師界面的右邊欄設(shè)置】

或是直接設(shè)置固定尺寸 setFixedSize(500,50) ）

使用spacer + layout的方式雖然有些麻煩，但可以無(wú)需去仔細(xì)調(diào)節(jié)各控件的坐標(biāo)，就可以簡(jiǎn)單實(shí)現(xiàn)控件的居中，并且也方便調(diào)節(jié)控件之間的相對(duì)距離等等

最后添加完所有組件的布局后效果如下：

理論上以上的效果也可以使用類似css的方式，調(diào)節(jié)控件的padding和margin等值來(lái)實(shí)現(xiàn)

界面的簡(jiǎn)單美化 QSS

現(xiàn)在界面布局雖然畫好了，但是默認(rèn)的灰色底色，方形邊框，9號(hào)Arial字體都太win98風(fēng)格了 : -(

可以在 該界面類的構(gòu)造函數(shù) 中調(diào)用ui中的控件對(duì)其進(jìn)行設(shè)置

（雖然在類的作用域和在設(shè)計(jì)師界面中都可以對(duì)控件的StyleSheet進(jìn)行設(shè)置，但是為了避免沖突，盡量在類中統(tǒng)一設(shè)置）

輸入框/標(biāo)簽中文本的居中等:

可直接在設(shè)計(jì)師界面中的右邊欄設(shè)置

輸入框中設(shè)置提示文字：

lineEdit_pwd->setEchoMode(QLineEdit::Password);//密文輸入

密碼欄中設(shè)置密文輸入：

lineEdit_pwd->setEchoMode(QLineEdit::Password);//密文輸入

顏色 / 邊框 / 字體 設(shè)置：

lineEdit_pwd->setStyleSheet("font: 25 14pt '微軟雅黑 Light';" //字體
                                "color: rgb(31,31,31);"		//字體顏色
                            	"padding-left:20px;"       //內(nèi)邊距-字體縮進(jìn)
                                "background-color: rgb(255, 255, 255);" //背景顏色
                                "border:2px solid rgb(20,196,188);border-radius:15px;");//邊框粗細(xì)-顏色-圓角設(shè)置 

漸變色設(shè)置：

this->setStyleSheet("background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(251,102,102, 200), stop:1 rgba(20,196,188, 210));");

對(duì)hover / pressed等動(dòng)作效果進(jìn)行設(shè)置:

login_button->setStyleSheet("QPushButton{font: 25 14pt '微軟雅黑 Light';color: rgb(255,255,255);background-color: rgb(20,196,188);"
                                "border: none;border-radius:15px;}"
                                "QPushButton:hover{background-color: rgb(22,218,208);}"http://hover
                                "QPushButton:pressed{background-color: rgb(17,171,164);}");//pressed

主題色的選擇：個(gè)人感受來(lái)說(shuō)，一般主頁(yè)面以白色或黑色作為底色，再選取一種顏色作為主題色/裝飾色即可，可使得畫面不會(huì)過(guò)于雜亂，主題色的選擇以HSV色彩模型為例，不要直接使用windows自帶色盤中的默認(rèn)顏色，色彩的飽和度不要過(guò)高，同時(shí)，當(dāng)色彩明度較高時(shí)，可以適當(dāng)提高飽和度，當(dāng)色彩明度較低時(shí)，可以適當(dāng)降低飽和度，使得顏色總體看起來(lái)不會(huì)過(guò)濃

最終呈現(xiàn)效果如下：

并且拖動(dòng)窗體長(zhǎng)寬，內(nèi)部的登陸視窗大小是不變的

添加圖片

方法1：添加資源

• 首先，ctrl+N新建一個(gè)QT Resource File
• 設(shè)定資源路徑的名稱

• 在資源界面中，點(diǎn)擊添加前綴，最好對(duì)前綴進(jìn)行修改（注意，此處的前綴是你之后調(diào)用圖片時(shí)，需要手動(dòng)輸入的url名稱 ）

4.在該界面下，繼續(xù)點(diǎn)擊添加文件（不添加無(wú)法加載圖片）

5.手動(dòng)在所需位置添加

ui->label_logo->setStyleSheet("image: url(:/image/profile.png);");
this->setStyleSheet("background: url(:/image/profile.png);");//窗口背景設(shè)置
//或setStyleSheet("background-image: url(:/image/profile.png);")

（以image形式設(shè)置圖片會(huì)以縮放的形式完整展示，以background形式設(shè)置圖片會(huì)多張重復(fù)平鋪背景）

方法2：直接指定圖片在計(jì)算機(jī)中的絕對(duì) / 相對(duì)路徑

label_logo->setStyleSheet("image: url(./pic/profile.png);");

注意設(shè)置Qlabel的alignment水平屬性為AlignHCente使圖片居中顯示

最終效果如下：

到此這篇關(guān)于使用Qt QSS繪制簡(jiǎn)單美化界面的文章就介紹到這了,更多相關(guān)Qt QSS界面美化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論