先看最終效果:@import url(http://www.shnenglu.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
1. 使用Qt Creator創建GUI工程
2. 在左邊放置一個QWidget (其objectName設置為sideBar),右邊放置一個QLabel (其objectName設置為content)
3. 在sideBar里放幾個QToolButton,并使用QGridLayout布局把他們布局在sideBar里
4. 設置這些QToolButton的圖標大小為64(可以自己調節),且SizePolice為Expanding
5. sideBar的SizePolicy為Fixed,minimumSize為90,Margin都設置為0
6. 主窗口使用GridLayout布局sideBar和右邊的content,并把主窗口的Margin, Spacing都設置為0,效果如圖
7. 有一個分隔符?
因為Qt自帶的Horizontal Line效果不佳,所以拖一個QWidget到按鈕之間,設置其minimumSize和maximumSize的height都為0,這樣一個1像素高的分隔符就完成了。
8. 至此,界面布局已經完成,接下來使用style sheet控制界面的顯示效果.
給sideBar加一個class屬性,其值為"SideBar",
分隔符加class屬性,值為"Separator".
加class屬性值是為了在style sheet里更方便的使用類選擇器,了解CSS的同學應該明白什么是類選擇器。
在Qt Designer里給widget加屬性的方法如下:
9. 相應的class屬性都加載完全了,接下來是應用style sheet到widget里了,選中最頂層的widget,在它的style sheet框里放置style sheet代碼:
點擊確定后,在Qt Designer立即可以看到應用style sheet的效果
10. Qt Designer里的工作都已經完成了,運行程序的效果如上圖,但是我們想動態的實現當按鈕被按下后顯示按鈕的按下狀態而其他按鈕恢復常態,需要使用程序去改變按鈕的current屬性值。
具體代碼看附件工程的源文件: