實例：用戶信息管理窗口
一、實例描述
最外層採用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代碼：
<?xml version="1.0" encoding="UTF-8"?>
userLayout00800400userLayoutQt::Horizontal4020修改關閉Qt::ElideRight基本信息AlignCenter聯繫方式AlignCenter詳細資料AlignCenter0Qt::Horizontal4020男女其他個人說明:Qt::AlignCenterdescTEdit姓 名:nameLEdit頭 像:Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenterpicGraph性 別:部 門:deptTEdit用戶名:userLEdit年 齡:ageLEditfalse備 注:Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter更新電子郵件:Qt::Horizontal4020聯繫地址:郵政編碼:個人電話:接收留言辦公電話:Qt::Vertical2040國家/地區:true中國美國日本英國德國省 份:true城 市:true個人說明:listWidgetlayoutWidgethorizontalSpacerlayoutWidget_2stackedWidgetlistWidgetcurrentRowChanged(int)stackedWidgetsetCurrentIndex(int)99199500181運行效果：
代碼打包下載：
碼雲：https://git.oschina.net/shawn06/qt_study_userinfomanager.git
