qt 5 界面美化


大家都知道,用UI做起界面來非常方便,但是如果我們不熟練他的操作的話,做起來也會有不少布局的麻煩,

所以,我打算寫一篇文章來記錄自己參考大牛用代碼寫界面的文章,感謝百度,感謝各位QT大牛的幫助。

 

所謂代碼布局,無非用到的是qss樣式表,它與css樣式表的語法形式差不多,下面廢話不多說,直接進入正題。

 

由於,QT自帶的窗口,不是那么美觀,所以我之前寫過一篇,制作無邊框界面,但是沒有涉及到美化,具體參考

http://www.cnblogs.com/Ten10/p/Ten16.html,然后發現,無邊框之后,按鈕也因為邊框的消失,而消失了

所以我們必須為我們的界面裝上按鈕,在UI里面拖一個組合框,里面放入兩個按鈕,把他們改成 - 和 x 的形式,當然

你也可以自己用代碼寫出來,博主為了方便,直接用的UI,如圖

               外面套的是一個GroupBox,他們的關系如圖所示。

 

然后我們用以下代碼裝上按鈕,我們的按鈕是要放到右上角的,我們利用組合框來設置closebtn和minbtn的大小。

 

裝上了之后,就是兩個普通的黑按鈕,沒有任何特效。為了加上如圖特效,就可以用到界面美化的qss了。

     這里必須提到一下button有兩個參數,一個是hover(鼠標浮過),一個是press(鼠標按下)

 

要想做到以上特效,我們必須建立一個qss文件,初始化按鈕為白色。

 

QPushButton#closebtn,QPushButton#minbtn                             類#作用對象            
{                                                                                            {
border: 0px;                                                                              屬性
color: rgb(255, 255, 255);                                                         }
}                                                                                             

這里面我們把邊框設置成0,顏色設置為白色,語法簡單吧,當然,如果我們作用兩個對象,可以用逗號隔開,如果我們作用所有的

按鈕對象,可以直接 QPushButton{ 屬性 },當然一般不建議使用。然后

QPushButton#minbtn:hover                                                   鼠標浮過minbtn  
{
background: rgba(30,144,255,0.7);                                        就變成藍色
}

QPushButton#closebtn:hover                                                 鼠標浮過closebtn 
{
background: #FF3030;                                                          這是紅色
}

加載完qss文件就OK啦

當然按下這個按鈕的時候就是QPushButton#closebtn:pressed{  屬性  } 可以自己定義自己想要的屬性。

然后加載自己要的背景圖片到對應的區域,方式雷同QGroupBox#對象{ border-image: url(:/pic/你的圖片.png); }

或者作用於其他類的某個對象,當然,這些只能改變這些對象的屬性,不能改變他的位置,但是這已經足夠了,位置的話

需要你自己在UI里面布局,或者在代碼里面布局,這里我就不多說了,用qss可以解決自己不熟悉UI而導致的一些弊端。

 

作者:Ten10

此文章屬於博主原創,轉載請注明出處

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM