Qt学习08——布局管理综合应用
实例：用户信息管理窗口
一、实例描述
最外层采用QSplitter分割窗口左右部分，左侧为QListWidget，右侧为QStackedWidget和QPushButton。QStackedWidget共有3个页面，通过信号-槽与QListWidget的item对应。QStackedWidget每个页面均采用QGridLayout进行布局。
布局框架大致如图所示：
二、实现过程
1、QListWidget
新建QListWidget控件，并添加3个项目；
2、QPushButton布局
新建2个按钮并使用QHLayout水平布局，用Spacer调整位置。调整位置时，使用layoutStretch控制布局比例。
3、QStackedWidget布局
新建QStackedWidget，与按钮布局组建QVLayout垂直布局，同样使用使用layoutStretch控制布局比例。
4、QSplitter分割器
Qt中并没有直接给出QSplitter控件，但是可以在布局工具栏中找到。同时选中listWidget和verticalLayout，使用分裂期水平布局即可。
测试一下效果：
关于QSplitter在Qt Creator中详细的使用方法，还可以参考QSplitter的使用和设置。
5、QStackedWidget页面内布局
添加每个页面内的控件，此为page1内的控件：
在page1页面下，右键stackedWidget对象，选择栅格布局（GridLayout），适当调整调整控件大小和位置、横纵布局比例（layoutColumnStretch、layoutRowStretch），在必要的地方使用spacer辅助调整：
按照这个方法完成stackedWidget的其他页面。
6、窗体布局调整
由于splitter没有设定QListWidget和右侧QVLayout的比例，需要在splitter外再加一层gridLayout来控制窗体布局比例。
7、添加信号-槽
使用Designer的信号-槽编辑器就可以完成简单的信号-槽添加。将listWidget的currentRowChanged(int)信号与stackedWidget的setCurrentIndex(int)槽函数对应，即可实现当listWidget切换列项目时，stackedWindow切换到对应编号的页面。
三、总结
整个layout层次如下：
附上.ui文件的xml代码：
userLayout
0
0
800
400
userLayout
Qt::Horizontal
40
20
修改
关闭
Qt::ElideRight
基本信息
AlignCenter
联系方式
AlignCenter
详细资料
AlignCenter
0
Qt::Horizontal
40
20
男
女
其他
个人说明:
Qt::AlignCenter
descTEdit
姓 名:
nameLEdit
头 像:
Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter
picGraph
性 别:
部 门:
deptTEdit
用户名:
userLEdit
年 龄:
ageLEdit
false
备 注:
Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter
更新
电子邮件:
Qt::Horizontal
40
20
联系地址:
邮政编码:
个人电话:
接收留言
办公电话:
Qt::Vertical
20
40
国家/地区:
true
中国
美国
日本
英国
德国
省 份:
true
城 市:
true
个人说明:
listWidget
layoutWidget
horizontalSpacer
layoutWidget_2
stackedWidget
listWidget
currentRowChanged(int)
stackedWidget
setCurrentIndex(int)
99
199
500
181
运行效果：
代码打包下载：
码云：https://git.oschina.net/shawn06/qt_study_userinfomanager.git