大家都知道,用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
此文章屬於博主原創,轉載請注明出處