Qt5.9 UI设计(四)——布局设计及自定义界面
前言
前面我们已经创建了mainwindow
ControlTabWidget
ControlTreeWidget
maintitlebar
4个UI几面,我们需要将其他三个UI放置到mainwindow显示,同时需要它们可以自适应的界面的大小缩放。这里会使用到水平布局和垂直布局方法。
(一)主界面布局设计
-
放置一个空的widget
-
将mainwindow主界面设置为垂直布局
-
添加一个horizontalLayout 放置到mainwindow
这时,horizontalLayout 和第一步放置的widget将主界面上下分为两半
-
在 horizontalLayou 中在放置widget2 和 widget3,这时,widget2和widget3水平平分horizontalLayou 框
-
将widget,widget2,widget3分别命名为widgetTitle,widgetTree和widgetTab
-
要想widgetTitle与horizontalLayou不是垂直平分整个框,直接拖动是不行的,这里需要可以设置其中一方的最大尺寸,这里将widgetTitle的最大高度限定为50,得到如下效果图
-
与上面相同,将widgetTree的最大宽度限定为250,得到如下效果图
-
上面创建的是QT默认的Qwidget空间,要怎么与我们自定义的界面相关联呢?
这里我们右键,选择提升为
-
设置类名ControlTabWidget和头文件路径,点击添加,如下图
-
如果添加成功,右键提升为可以看到我们自定义的界面ControlTabWidget ,ControlTreeWidget,MainTitleBar
-
最后,可以看到空间的类,已经变成了我们上一章自定义的类了
到这里,就已经将ControlTabWidget
ControlTreeWidget
maintitlebar
这三个界面布局到 mainwindow
一个界面上来了。
(二)maintitlebar 界面设计
-
这里设计两个label控件,一个用来显示LOGO,一个用来显示Title名字
- 放置三个按键在最右边,分别用作最大,最小和关闭的功能
- 中间放置的是一个horizontalSpacer,用来限定位置使用
-
将Label和按键的字符去掉,添加上LOGO图片
- 注意LOGO图片的放置,需要限定图片的最大值,不然图片放置不下
- 设置图片可以缩放
(三)ControlTreeWidget 界面设计
-
设置ControlTreeWidget 为垂直对齐,然后再放入一个treeWidget控件,如下图
-
右键编辑项目,添加不同的项
-
属性中插入图片,以及改变字体大小信息
-
同样的方式将其他几项全部设置好
(四)ControlTabWidget 界面设计
-
将ControlTabWidget主界面设置为水平布局,然后放置一个QTabWidget 控件
-
修改控件的名字以及每页的显示标题
总结
本章实现了 ControlTabWidget
ControlTreeWidget
maintitlebar
这三个界面布局到 mainwindow
一个界面上的功能。
这里只是界面的布局,因为各个控件的具体功能还未实现,暂时无法联动,并且样式也还未有设置,显示的还是系统默认的样式。
下面一章将介绍如何将 ControlTabWidget
与 ControlTreeWidget
联动的功能
本章工程名字为:page_sample_02
完整工程下载地址,请到 liwen01
微信公众号中回复: QT
获取
![](https://img2023.cnblogs.com/blog/555985/202212/555985-20221229171054114-894213487.jpg)