Qt学习08——布局管理综合应用

版权声明:欢迎转载和收藏。转载请注明出处,谢谢! https://blog.csdn.net/u014266675/article/details/73530736

实例:用户信息管理窗口

一、实例描述

最外层采用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

展开阅读全文

没有更多推荐了,返回首页