Qt：创建SideBar

Qt：创建SideBar

先看最终效果：@import url(http://www.cppblog.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属性值。

具体代码看附件工程的源文件：

/Files/biao/SideBar.7z