一、Qt控件



00:00



1. QTabWidget基本用法



01:31



1)QTabWidget的介绍
  • 基础概念:QTabWidget是Qt框架中的容器控件,用于创建带标签页的界面布局。

  • 继承关系:默认从QWidget继承,包含多个可切换的子页面。

  • 应用场景:适用于需要分页显示不同内容的界面设计,如设置对话框、多文档界面等。

2)QTabWidget的添加



02:09



  • 控件添加方法

    • 查找技巧:在Qt Designer中可通过过滤器直接搜索"tab"快速定位控件

    • 拖拽操作:将TabWidget从控件面板拖拽至主窗体即可完成添加

    • 页面管理:默认包含两个标签页(Tab1/Tab2),可通过右键菜单进行增删操作

  • 页面内容定制

    • 控件添加:在每个标签页内可自由添加其他控件(如按钮、文本框等)

    • 示例操作:

      • 第一页添加两个QPushButton

      • 第二页添加垂直布局的QWidget

    • 样式修改:支持通过样式表修改背景色(如设置为蓝色background-color: blue)

  • 运行效果

    • 原生特性:默认显示标签栏和当前页内容,支持鼠标点击切换

    • 样式差异:与WPS等商业软件的标签页存在明显视觉差异

    • 功能扩展:可通过insertTab()方法动态添加新页面,支持带图标和文本的标签

3)QTabWidget界面展示



03:29



  • 基本布局特性

    • 控件集成: 关闭按钮、放大按钮等功能按钮与标签页(tab)位于同一行

    • 多元素共存: 标签页区域可同时包含控件和图标,支持右键菜单功能

    • 非菜单特性: 右键弹出的不是标准菜单项,而是可添加控件的独立窗口

  • 自定义标签页功能

    • 添加方法:

      • int insertTab(int index, QWidget *page, const QString &label)

      • int insertTab(int index, QWidget *page, const QIcon &icon, const QString &label)

    • 扩展特性:

      • 支持在标签页区域添加自定义按钮

      • 允许通过样式表修改标签页外观

      • 可实现非等宽标签页布局

  • 复杂界面实现

    • 分层结构:

      • 主界面采用多级TabWidget嵌套

      • 下方功能区可视为独立标签页组

    • 布局技术:

      • 使用分裂器(QSplitter)实现区域划分

      • 左右两侧可添加辅助控件组

    • 样式定制:

      • 通过样式表(QSS)深度定制界面

      • 需要配合无边框窗口技术(第三章)

      • 控件自定义技术将在第四章详解

4)QTabWidget的用法



05:44



  • QTabWidget的插入页操作

    

    06:43

    

    • 右键插入: 在QT设计器中右键点击tab页可选择"插入页",支持在当前页前/后插入新页

    • 示例操作: 演示在tab1和tab2之间插入新页,并添加"123"控件

    • 动态添加: 通过代码调用insertTab()方法,参数为(索引位置, QWidget页面, 标签文本)

  • QTabWidget的标题修改

    

    07:22

    

    • 设计器修改: 直接选中tab页修改objectName属性,但可能存在bug

    • 代码修改: 推荐使用setTabText(index, text)方法更可靠

    • 示例: 将第二页标题改为"第二页",需注意QT设计器可能显示异常

  • QTabWidget的界面修改

    

    08:16

    

    • 整体布局: 可对整个tabWidget应用水平/垂直布局,自动填充窗口

    • 边界调整: 通过粉色边界区域调整页边距等参数

    • 样式定制: 商业软件通常需要修改原生窗口样式,包括:

      • 宽度/高度设置

      • 颜色修改

      • 其他属性调整

    • 案例参考: WPS采用QWidget套QTabWidget实现,并去掉窗口边框

  • QTabWidget的删除操作

    

    08:48

    

    • 正确操作: 右键点击具体tab页选择"删除",而非直接删除整个控件

    • 注意事项: 直接删除会移除整个tabWidget控件

    • 代码删除: 对应removeTab(index)方法

  • QTabWidget的代码添加

    

    09:34

    

    • QTabWidget的包含头文件

      

      10:25

      

      • 头文件: #include <QTabWidget>

      • 命名规范: 建议使用有区分度的变量名如pTabWidget

    • QTabWidget的添加tab页

      

      10:35

      

      • 核心方法:

        • addTab(QWidget*, const QString&)

        • insertTab(int index, QWidget*, const QString&)

      • 参数说明:

        • 第一个参数:tab页索引位置

        • 第二个参数:要添加的QWidget页面

        • 第三个参数:标签文本

      • 扩展方法: 带图标的版本insertTab(int, QWidget*, const QIcon&, const QString&)

    • QTabWidget的构造方法

      

      12:06

      

      • 标准构造: explicit QTabWidget(QWidget *parent = nullptr)

      • 继承关系: 所有QT控件都继承自QWidget

    • QTabWidget的信号槽

      

      12:29

      

      • 关键信号:

        • currentChanged(int index): 当前页改变时触发

        • tabCloseRequested(int index): 页签关闭请求时触发

        • tabBarClicked(int index): 页签栏点击时触发

        • tabBarDoubleClicked(int index): 页签栏双击时触发

      • 槽方法:

        • setCurrentIndex(int): 设置当前显示页

        • setCurrentWidget(QWidget*): 设置当前显示控件

    • 应用案例

      

      13:35

      

      • 例题:QTabWidget插入tab页

        • 步骤:

          • 创建QTabWidget实例

          • 新建多个QWidget作为页面

          • 使用setStyleSheet设置不同背景色区分

          • 调用insertTab方法添加页面

        • 注意事项:

          • 样式表属性名必须正确(如background-color)

          • 拼写错误会导致样式不生效

          • 建议使用代码创建而非设计器拖拽

    • 应用案例

      

      20:31

      

      • 例题:QTabWidget信号槽

        • 实现方式:

二、QTabWidget各种常见用法详解



23:01



1. 添加自定义tab



23:10



  • 插入方法:使用insertTab()方法插入tab,支持带图标和不带图标两种形式:

  • 关闭按钮设置:通过setTabsClosable(true)显示关闭按钮,触发关闭时会发出tabCloseRequested信号

  • 关闭实现:实际关闭tab需要调用removeTab(index)方法,而不是close()方法

  • 移动功能:通过setMovable(true)允许用户拖动tab改变顺序

  • 位置设置:使用setTabPosition()设置tab显示位置,参数为枚举值:

  • 形状设置:通过setTabShape()设置tab形状,可选Rounded(默认)或Triangular

2. 应用案例



32:24



1)例题:tab不可见示例
  • 方法:使用setTabVisible(index, false)隐藏指定tab

  • 效果:隐藏的tab不会保留空白位置,其他tab会前移填补

2)例题:鼠标悬浮提示信息设置



35:14



  • 方法:使用setTabToolTip(index, tip)设置悬浮提示

  • 示例:

  • 注意事项:需要包含#ifndef QT_NO_TOOLTIP宏定义

3. 信号与槽
  • 常用信号:

    • currentChanged(int index):当前tab改变时触发

    • tabCloseRequested(int index):点击关闭按钮时触发

    • tabBarClicked(int index):点击tab时触发

    • tabBarDoubleClicked(int index):双击tab时触发

  • 连接示例:

三、知识小结

知识点

核心内容

关键操作/易混淆点

难度系数

TabWidget基础使用

通过QT设计器拖拽控件创建Tab页,可添加按钮等子控件

标题修改建议用代码而非设计器(易出bug)

⭐⭐

代码动态添加Tab页

使用insertTab()方法:参数为索引、QWidget对象和标题

注意索引从0开始计数

⭐⭐⭐

样式表设置

通过setStyleSheet()修改背景色等样式

background-color拼写错误会导致样式失效

⭐⭐

信号槽机制

4个核心信号: • currentChanged(int); • tabCloseRequested(int); • tabBarClicked(int); • tabBarDoubleClicked(int)

双击事件会同时触发单击信号

⭐⭐⭐⭐

关闭功能实现

1. setTabsClosable(true)显示关闭按钮; 2. 通过removeTab(int)实际移除

需区分信号触发和实际移除操作

⭐⭐⭐

布局特性

支持通过setTabPosition()设置标签位置(东南西北)

西/东侧时文本默认垂直显示需额外处理

⭐⭐⭐⭐

形状控制

setTabShape()可选Rounded或Triangular样式

梯形标签实际显示效果需调试

⭐⭐

高级功能

• 拖拽排序(setMovable); • 悬浮提示(setTabToolTip); • 可见性控制(setTabEnabled)

空标签页需特殊处理

⭐⭐⭐⭐

商业软件对比

WPS的Tab页包含: • 混合布局控件; • 网页嵌入(WebEngineView); • 自定义样式表

原生控件与商业产品的样式差异显著

⭐⭐⭐⭐⭐

扩展开发提示

需重写protected方法实现完全自定义,后续章节讲解: • 无边框窗口(第3章); • 控件深度定制(第4章); • Web引擎集成(第8-9章)

商业级开发需要组合多种技术

⭐⭐⭐⭐⭐