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