526互联

Qt5.9 UI设计(四)——布局设计及自定义界面

发布时间 2023-04-16 15:50:44作者: liwen01

前言

前面我们已经创建了mainwindow ControlTabWidget ControlTreeWidget maintitlebar 4个UI几面，我们需要将其他三个UI放置到mainwindow显示，同时需要它们可以自适应的界面的大小缩放。这里会使用到水平布局和垂直布局方法。

(一)主界面布局设计

  1. 放置一个空的widget

  2. 将mainwindow主界面设置为垂直布局

  3. 添加一个horizontalLayout 放置到mainwindow
    这时，horizontalLayout 和第一步放置的widget将主界面上下分为两半

  4. 在 horizontalLayou 中在放置widget2 和 widget3，这时，widget2和widget3水平平分horizontalLayou 框

  5. 将widget，widget2，widget3分别命名为widgetTitle，widgetTree和widgetTab

  6. 要想widgetTitle与horizontalLayou不是垂直平分整个框，直接拖动是不行的，这里需要可以设置其中一方的最大尺寸，这里将widgetTitle的最大高度限定为50，得到如下效果图

  7. 与上面相同，将widgetTree的最大宽度限定为250，得到如下效果图

  8. 上面创建的是QT默认的Qwidget空间，要怎么与我们自定义的界面相关联呢？
    这里我们右键，选择提升为

  9. 设置类名ControlTabWidget和头文件路径，点击添加，如下图

  10. 如果添加成功，右键提升为可以看到我们自定义的界面ControlTabWidget ，ControlTreeWidget，MainTitleBar

  11. 最后，可以看到空间的类，已经变成了我们上一章自定义的类了

到这里，就已经将ControlTabWidget ControlTreeWidget maintitlebar 这三个界面布局到 mainwindow 一个界面上来了。

(二)maintitlebar 界面设计

  1. 这里设计两个label控件，一个用来显示LOGO，一个用来显示Title名字

    1. 放置三个按键在最右边，分别用作最大，最小和关闭的功能
    2. 中间放置的是一个horizontalSpacer，用来限定位置使用

  2. 将Label和按键的字符去掉，添加上LOGO图片

    1. 注意LOGO图片的放置，需要限定图片的最大值，不然图片放置不下
    2. 设置图片可以缩放

(三)ControlTreeWidget 界面设计

  1. 设置ControlTreeWidget 为垂直对齐，然后再放入一个treeWidget控件，如下图

  2. 右键编辑项目，添加不同的项

  3. 属性中插入图片，以及改变字体大小信息

  4. 同样的方式将其他几项全部设置好

(四)ControlTabWidget 界面设计

  1. 将ControlTabWidget主界面设置为水平布局，然后放置一个QTabWidget 控件

  2. 修改控件的名字以及每页的显示标题

总结

本章实现了 ControlTabWidget ControlTreeWidget maintitlebar 这三个界面布局到 mainwindow 一个界面上的功能。
这里只是界面的布局，因为各个控件的具体功能还未实现，暂时无法联动，并且样式也还未有设置，显示的还是系统默认的样式。

下面一章将介绍如何将 ControlTabWidget 与 ControlTreeWidget 联动的功能
本章工程名字为：page_sample_02

完整工程下载地址，请到 liwen01 微信公众号中回复: QT 获取

---------------------------End---------------------------
长按识别二维码
关注 liwen01 公众号