2.6 容器控件(二)

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
简介: 2.6 容器控件(二)

今天介绍容器控件的QTabWidget和QToolBox。

2.6.5 QTabWidget

01ebd755782e4c909dad0843d3544acf.jpeg


当我们需要显示不同的信息窗口时,可以使用选项卡窗口。

选项卡窗口由一个标签栏和可见区域组成,默认情况下标签栏显示可见区域在最上方,但可以设置其显示的部位。

每个标签都与一个tab页关联,当激活一个标签,则对应的tab页显示,其它tab页隐藏。从左至右每个标签对应索引0~n。

QTabWidget的功能比较类似于QStackWidget。

QTabWidget直接继承QWidget,以下是QTabWidget的新增属性。可以不着急看属性,先试想,如果让你写一个QTabWidget,你会给这个类添加哪些属性。

01ebd755782e4c909dad0843d3544acf.jpeg

1. 需要一个count属性来标识总共有count个标签。

2. 需要一个属性来记录当前标签页。

  • 标签的索引从左至右或从上到下,从0开始。

3. documentMode可见区域是否以文档模式显示。

  • 当为true时,文档模式会去掉QTabWidget周边的框架。

4. 当标签文字很长时,对于标签文字显示应该采用的省略策略,elideMode。

  • Qt::ElideLeft:省略号在左边。
  • Qt::ElideRight:省略号在右边。
  • Qt::ElideMiddle:省略号在中间。
  • Qt::ElideNone:显示全部文字。

5. 每个标签都可以有个图标,所以需要图标大小iconSize。图标的大小还可以通过样式表来设置,这个我们以后会讲。

6. 每个标签可以和其它标签交换前后顺序,moveable是否可交换。

7. 当只有一个标签时,该标签可以自动隐藏,tabBarAutoHide。

8. 标签不仅仅可以放在可见区域上方,还可以放在下方,左方,右方,tabPosition。

QTabWidget::North:(北)上方。

QTabWidget::South:(南)下方。

QTabWidget::West:(西)左方。

QTabWidget::East:(东)右方。

9. 标签也可以有不同的形状,tabShape。

  • QTabWidget::Rounded:默认矩形。
  • QTabWidget::Triangular:三角形。

10. 标签也可以关闭,tabsClosable。这里要注意,虽然标签上显示了关闭按钮,但点击后标签并不关闭,而是会发出tabCloseRequested(int)信号,你需要连接该信号再调用removeTab槽来关闭标签。

11. 如果标签多了,也可以使用滚动按钮,usesScrollButtons。

2.6.6 QToolBox

01ebd755782e4c909dad0843d3544acf.jpeg

这个QToolBox窗口类似于QQ的分组界面,我想大家应该很熟悉了。

我们直接来看它的属性:

01ebd755782e4c909dad0843d3544acf.jpeg

同样的count用来记录分组item的个数,currentIndex记录当前展开的item页。并且索引也都是从0开始。

2.6.7 示例

新建Gui项目ContainerWidget2,类名为ContainerWidget2,基类继承自QWidget

ui界面

01ebd755782e4c909dad0843d3544acf.jpeg

containerwidget2.h

#ifndef CONTAINERWIDGET2_H
#define CONTAINERWIDGET2_H
#include <QWidget>
namespace Ui {
class ContainerWidget2;
}
class ContainerWidget2 : public QWidget
{
    Q_OBJECT
public:
    explicit ContainerWidget2(QWidget *parent = 0);
    ~ContainerWidget2();
private slots:
    void on_combo_elide_currentIndexChanged(int index);
    void on_combo_tabposition_currentIndexChanged(int index);
    void on_combo_tabshape_currentIndexChanged(int index);
    void on_check_document_toggled(bool checked);
    void on_check_autohide_toggled(bool checked);
    void on_check_moveable_toggled(bool checked);
    void on_check_closable_toggled(bool checked);
    void on_check_scrollBtns_toggled(bool checked);
    void on_btn_addItem_clicked();
    void on_btn_delItem_clicked();
private:
    Ui::ContainerWidget2 *ui;
};
#endif // CONTAINERWIDGET2_H

containerwidget2.cpp

#include "containerwidget2.h"
#include "ui_containerwidget2.h"
ContainerWidget2::ContainerWidget2(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::ContainerWidget2)
{
    ui->setupUi(this);
    /*1  QTabWidget设置*/
    //标签省略策略
    QStringList textList;
    textList << "ElideLeft" <<"ElideRight" << "ElideMiddle" << "ElideNone";
    ui->combo_elide->addItems(textList);
    //标签位置
    textList.clear();
    textList << "North" << "South" << "West" << "East";
    ui->combo_tabposition->addItems(textList);
    //标签形状
    textList.clear();
    textList << "Rounded" << "Triangular";
    ui->combo_tabshape->addItems(textList);
    //连接关闭槽
    connect(ui->tabWidget, &QTabWidget::tabCloseRequested,
                 ui->tabWidget, &QTabWidget::removeTab);
    //添加一个标签
    ui->tabWidget->addTab(new QLabel("Add Tab"), tr("第三首歌"));
}
ContainerWidget2::~ContainerWidget2()
{
    delete ui;
}
void ContainerWidget2::on_combo_elide_currentIndexChanged(int index)
{
    ui->tabWidget->setElideMode((Qt::TextElideMode)index);
}
void ContainerWidget2::on_combo_tabposition_currentIndexChanged(int index)
{
    ui->tabWidget->setTabPosition((QTabWidget::TabPosition)index);
}
void ContainerWidget2::on_combo_tabshape_currentIndexChanged(int index)
{
    ui->tabWidget->setTabShape((QTabWidget::TabShape)index);
}
void ContainerWidget2::on_check_document_toggled(bool checked)
{
    ui->tabWidget->setDocumentMode(checked);
}
void ContainerWidget2::on_check_autohide_toggled(bool checked)
{
    ui->tabWidget->setTabBarAutoHide(checked);
}
void ContainerWidget2::on_check_moveable_toggled(bool checked)
{
    ui->tabWidget->setMovable(checked);
}
void ContainerWidget2::on_check_closable_toggled(bool checked)
{
    ui->tabWidget->setTabsClosable(checked);
}
void ContainerWidget2::on_check_scrollBtns_toggled(bool checked)
{
    ui->tabWidget->setUsesScrollButtons(checked);
}
void ContainerWidget2::on_btn_addItem_clicked()
{
    ui->toolBox->addItem(new QLabel("新item"), tr("untitled"));
}
void ContainerWidget2::on_btn_delItem_clicked()
{
    int index = ui->toolBox->currentIndex();
    if (index != -1)
    {
        ui->toolBox->removeItem(index);
    }
}

好的,关于容器控件我们就讲完了,下节开始讲按钮控件。

如果你想第一时间看到小豆君的技术分享,就赶快关注吧。

欢迎关注小豆君的微信公众号:小豆君,只要关注,便可加入小豆君为大家创建的C++\Qt交流群,方便讨论学习。

相关文章
|
11月前
|
前端开发 Shell 测试技术
SAP UI5 应用里一些容器控件的介绍
SAP UI5 应用里一些容器控件的介绍
|
11月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之一百零七 - SAP UI5 OverflowToolbar 容器控件介绍的试读版
SAP UI5 应用开发教程之一百零七 - SAP UI5 OverflowToolbar 容器控件介绍的试读版
|
11天前
|
容器
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
20 3
|
11天前
|
容器
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
16 2
|
3月前
|
容器 内存技术
Qt中常用容器组控件介绍和实操-1
Qt中常用容器组控件介绍和实操
|
3月前
|
API 容器
Qt中常用容器组控件介绍和实操-2
Qt中常用容器组控件介绍和实操
|
C++ 容器
2.6 容器控件(一)
2.6 容器控件(一)
2.6 容器控件(一)
|
Python 容器
Python Qt GUI设计:QTabWidget、QStackedWidget和QDockWidget容器控件类(提升篇—2)
Python Qt GUI设计:QTabWidget、QStackedWidget和QDockWidget容器控件类(提升篇—2)
Python Qt GUI设计:QTabWidget、QStackedWidget和QDockWidget容器控件类(提升篇—2)
|
XML JSON 自然语言处理
SAP UI5 初学者教程之十一 :SAP UI5 容器类控件 Page 和 Panel 试读版
SAP UI5 初学者教程之十一 :SAP UI5 容器类控件 Page 和 Panel 试读版
105 0
SAP UI5 初学者教程之十一 :SAP UI5 容器类控件 Page 和 Panel 试读版
|
XML JSON 自然语言处理
SAP UI5 初学者教程之十一 :SAP UI5 容器类控件 Page 和 Panel 试读版
教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 的引导过程 Bootstrap SAP UI5 初学者教程之三:开始接触第一个 SAP UI5 控件 SAP UI5 初学者教程之四:XML 视图初探 SAP UI5 初学者教程之五:视图控制器初探 SAP UI5 初学者教程之六 - 了解 SAP UI5 的模块(Module)概念 SAP UI5 初学者教程之七 - JSON 模型初探 SAP UI5 初学者教程之八 - 多语言的支持 SAP UI5 初学者教程之九 - 创建
SAP UI5 初学者教程之十一 :SAP UI5 容器类控件 Page 和 Panel 试读版