正点原子QT之容器

8. 容器

（1） Group Box:组框
（2） Scroll Area:滚动区域
（3） Tool Box:工具箱
（4） Tab Widget:标签小部件
（5） Stacked WIdget:堆叠小部件
（6） Frame:帧
（7） Widget:小部件
（8） MDI Area:MDI 区域
（9） Dock Widget:停靠窗体部件

8.1 QGroupBox:组框

QGroupBox 继承 QWidget。 QGroupBox 为构建分组框提供了支持。分组框通常带有一个边框和一个标题栏，作为容器部件来使用，在其中可以布置各种窗口部件。布局时可用作一组控件的容器，但是需要注意的是，内部通常使用布局控件（如QBoxLayout）进行布局。组框还提供键盘快捷方式，键盘快捷方式将键盘焦点移动到组框的一个子部件。

QGroupBox 小部件提供一个带有标题的组框框架。 一般与一组或者是同类型的部件一起使用。

案例：组框示例

例 33_qgroupbox，组框示例（难度：简单），使用 3 个 QRadioButton 单选框按钮，与QVBoxLayout（垂直布局）来展示组框的基本使用。

程序编译运行的结果如下，可以看到 radioButton 有规则的排布在 groupBox 组框里面。

#include "mainwindow.h"
#include <QList>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置主窗体位置与大小 */
    this->setGeometry(0, 0, 800, 480);
    /* 以标题为“QGroupBox示例”实例化groupBox对象 */
    groupBox = new QGroupBox(tr("QGroupBox示例"), this);
    groupBox->setGeometry(300, 100, 300, 200);

    vBoxLayout = new QVBoxLayout();

    /* 字符串链表 */
    QList <QString>list;
    list<<"选项一"<<"选项二"<<"选项三";
    for(int i = 0; i < 3; i++){
        radioButton[i] = new QRadioButton();
        radioButton[i]->setText(list[i]);
        /* 在vBoxLayout添加radioButton */
        vBoxLayout->addWidget(radioButton[i]);
    }
    /* 添加一个伸缩量1 */
    vBoxLayout->addStretch(1);
    /* vBoxLayout布局设置为groupBox布局 */
    groupBox->setLayout(vBoxLayout);
}

MainWindow::~MainWindow()
{
}

8.2 QScrollArea:滚动区域

QScrollArea 继承 QAbstractScrollArea。滚动区域用于在框架中显示子部件的内容。如果小部件超过框架的大小，视图就会出现滚动条，以便可以查看子小部件的整个区域。

QScrollArea 类提供到另一个小部件的滚动视图。

案例：滚动视图

例 34_qscrollarea 滚动视图（难度：简单），使用一个 Label 标签，将 Label 标签设置为一张图片，并把 Label 标签放置于滚动区域内，此时图片应要大于滚动区域才会出现滚动条。

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setGeometry(0, 0, 800, 480);

    scrollArea = new QScrollArea(this);
    /* 设置滚动区域为700*380 */
    scrollArea->setGeometry(50, 50, 700, 380);

    label = new QLabel();
    /* label显示的lantingxu.png图片分辨率为1076*500 */
    QImage image(":/images/lantingxu.png");
    label->setPixmap(QPixmap::fromImage(image));

    scrollArea->setWidget(label);

}

MainWindow::~MainWindow()
{
}

8.3 QToolBox:工具箱

QToolBox 继承 QFrame。 QToolBox 类提供了一列选项卡小部件项。工具箱是一个小部件，它显示一列选项卡在另一列的上面，当前项显示在当前选项卡的下面。每个选项卡在选项卡列中都有一个索引位置。选项卡的项是 QWidget。

QToolBox（工具盒类）提供了一种列状的层叠窗体，中文译为工具箱，类似抽屉

案例：QQ 好友面板

35_qtoolbox， QQ 好友面板之 QToolBox（难度：简单），本例将使用到前面的知识QGroupBox 组框与 QBoxLayout 布局管理。

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setGeometry(0, 0, 800, 480);

    toolBox = new QToolBox(this);
    toolBox->setGeometry(300, 50, 200, 250);
    /* 设置toolBox的样式，此处设置为30%不透明度的黑色 */
    toolBox->setStyleSheet("QToolBox {background-color:rgba(0, 0, 0, 30%);}");

    for(int i = 0; i < 2; i++){
        vBoxLayout[i] = new QVBoxLayout();
        groupBox[i] = new QGroupBox(this);
    }

    /* 字符串链表 */
    QList <QString>strList;
    strList<<"李白"<<"王照君"<<"李元芳"<<"程咬金"<<"钟馗"<<"上官婉儿";

    /* 字符串图标链表 */
    QList <QString>iconsList;
    iconsList<<":/icons/libai"<<":/icons/wangzhaojun"
            <<":/icons/liyuanfang"<<":/icons/chengyaojin"
           <<":/icons/zhongkui"<<":/icons/shangguanwaner";

    for(int i = 0; i < 6; i++){
        toolButton[i] = new QToolButton();
        /* 设置toolButton图标 */
        toolButton[i]->setIcon(QIcon(iconsList[i]));
        /* 设置toolButton的文本 */
        toolButton[i]->setText(strList[i]);
        /* 设置toolButton的大小 */
        toolButton[i]->setFixedSize(150, 40);
        /* 设置toolButton的setToolButtonStyle的样式 */
        toolButton[i]->setToolButtonStyle(
                    Qt::ToolButtonTextBesideIcon
                    );
        if( i < 3 ) {
            /* 将toolButton添加到时垂直布局 */
            vBoxLayout[0]->addWidget(toolButton[i]);
            /* 添加一个伸缩量1 */
            vBoxLayout[0]->addStretch(1);
        } else {
            vBoxLayout[1]->addWidget(toolButton[i]);
            vBoxLayout[1]->addStretch(1);
        }
    }
    /* 将垂直布局的内容添加到组框groupBox */
    groupBox[0]->setLayout(vBoxLayout[0]);
    groupBox[1]->setLayout(vBoxLayout[1]);

    /* 将组框加入QToolBox里 */
    toolBox->addItem(groupBox[0],"我的好友");
    toolBox->addItem(groupBox[1],"黑名单");
}

MainWindow::~MainWindow()
{
}

8.4 QTabWidget:标签小部件

TabWidget 继承 QWidget。 abWidget 类提供了一组选项卡（多页面）小部件。 QTabWidget主要是用来分页显示的，每一页一个界面，众多界面公用一块区域，节省了界面大小，很方便的为用户显示更多的信息。

案例：标题栏多页面切换

例 36_qtabwidget，标题栏多页面切换（难度：简单），本例创建 3 个页面，每个页面里有一个 Label 标签部件，点击每个页面的选项卡则会切换到不同的页面上。

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setGeometry(0, 0, 800, 480);

    widget = new QWidget(this);
    /* 居中 */
    this->setCentralWidget(widget);

    /* 多页面小部件 */
    tabWidget = new QTabWidget();

    /* 水平布局实例化 */
    hBoxLayout = new QHBoxLayout();
    QList <QString>strLabelList;
    strLabelList<<"标签一"<<"标签二"<<"标签三";

    QList <QString>strTabList;
    strTabList<<"页面一"<<"页面二"<<"页面三";

    QList <QString>iconList;
    iconList<<":/icons/icon1"
           <<":/icons/icon2"
          <<":/icons/icon3";

    for (int i = 0; i < 3; i++) {
        label[i] = new QLabel();
        /* 设置标签文本 */
        label[i]->setText(strLabelList[i]);
        /* 标签对齐方式（居中） */
        label[i]->setAlignment(Qt::AlignCenter);
        /* 添加页面 */
        tabWidget->addTab(label[i],
                          QIcon(iconList[i]),
                          strTabList[i]
                          );
    }
    /* 是否添加关闭按钮 */
    //tabWidget->setTabsClosable(true);
    /* 将tabWidget水平直排布 */
    hBoxLayout->addWidget(tabWidget);
    /* 将垂直布局设置到widget */
    widget->setLayout(hBoxLayout);
}

MainWindow::~MainWindow()
{
}

8.5 QStackedWIdget:堆叠小部件

QStackedWidget 继承 QFrame。 QStackedWidget 类提供了一个小部件堆栈，其中一次只能看到一个小部件，与 QQ 的设置面板类似。 QStackedWidget 可用于创建类似于 QTabWidget 提供的用户界面。它是构建在 QStackedLayout 类之上的一个方便的布局小部件。常与 QListWidget搭配使用，效果如下图，左边的是 QListWidget 列表，右边的是 QStackedWidget。

案例：列表栏多页面切换

例 37_qstackedwidget，列表栏多页面切换（难度：简单），本例创建 3 个堆栈页面，每个页面里有一个 Label 标签部件，点击每个列表的不同项则会切换到不同的页面上。

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setGeometry(0, 0, 800, 480);

    /* widget小部件实例化 */
    widget = new QWidget(this);

    /* 设置居中 */
    this->setCentralWidget(widget);

    /* 垂直布局实例化 */
    hBoxLayout = new QHBoxLayout();

    /* 堆栈部件实例化 */
    stackedWidget = new QStackedWidget();

    /* 列表实例化 */
    listWidget = new QListWidget();

    QList <QString>strListWidgetList;
    strListWidgetList<<"窗口一"<<"窗口二"<<"窗口三";

    for (int i = 0; i < 3; i++){
        /* listWidget插入项 */
        listWidget->insertItem(
                    i,
                    strListWidgetList[i]
                    );
    }

    QList <QString>strLabelList;
    strLabelList<<"标签一"<<"标签二"<<"标签三";

    for (int i = 0; i < 3; i++){
        label[i] = new QLabel();
        /* 设置标签文本 */
        label[i]->setText(strLabelList[i]);
        /* 标签对齐方式（居中） */
        label[i]->setAlignment(Qt::AlignCenter);
        /* 添加页面 */
        stackedWidget->addWidget(label[i]);
    }

    /* 设置列表的最大宽度 */
    listWidget->setMaximumWidth(200);
    /* 添加到水平布局 */
    hBoxLayout->addWidget(listWidget);
    hBoxLayout->addWidget(stackedWidget);

    /* 将widget的布局设置成hboxLayout */
    widget->setLayout(hBoxLayout);

    /* 利用listWidget的信号函数currentRowChanged()与
     * 槽函数setCurrentIndex(),进行信号与槽连接
     */
    connect(listWidget, SIGNAL(currentRowChanged(int)),
            stackedWidget, SLOT(setCurrentIndex(int)));
}

MainWindow::~MainWindow()
{
}

8.6 QFrame:帧

见6.7

8.7 QWidget:小部件

QWidget 类是所有用户界面对象的基类（如 QLabel 类继承于 QFrame 类，而 QFrame 类又继承于 QWidget 类）。

QWidget 不是一个抽象类，它可以用作其他 Widget 的容器，并很容易作为子类来创建定制Widget。它经常用于创建、放置和容纳其他的 Widget 窗

8.8 QMDIArea: MDI 区域

QMdiArea 继承 QAbstractScrollArea。 QMdiArea 小部件提供一个显示 MDI 窗口的区域。QMdiArea的功能本质上类似于 MDI窗口的窗口管理器。大多数复杂的程序，都使用 MDI框架，在 Qt designer 中可以直接将控件 MDI Area 拖入使用。

案例：父子窗口

例 38_qmdiarea，父子窗口（难度：简单），本例创建一个 MDI Area 区域，使用一个按钮，每单击按钮时，就会在 MDI Area 区域新建一个 MdiSubWindow 窗口。

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置窗口的显示位置与大小 */
    this->setGeometry(0, 0, 800, 480);
    pushButton = new QPushButton("新建窗口", this);
    pushButton->setGeometry(0, 30, 100, 30);

    mdiArea = new QMdiArea(this);
    /* 设置MDI Area区域大小 */
    mdiArea->setGeometry(100, 30, 700, 430);
    /* 连接信号槽 */
    connect(pushButton, SIGNAL(clicked()),
            this, SLOT(creat_newMdiSubWindow()));
}

void MainWindow::creat_newMdiSubWindow()
{
    newMdiSubWindow = new QMdiSubWindow();
    newMdiSubWindow->setWindowTitle("新建窗口");

    /* 如果窗口设置了Qt::WA_DeleteOnClose 这个属性，
     * 在窗口接受了关闭事件后，Qt会释放这个窗口所占用的资源
     */
    newMdiSubWindow->setAttribute(Qt::WA_DeleteOnClose);

    /* 添加子窗口 */
    mdiArea->addSubWindow(newMdiSubWindow);
    /* 显示窗口，不设置时为不显示 */
    newMdiSubWindow->show();
    /* 自适应窗口 */
    newMdiSubWindow->sizePolicy();
    /* 以级联的方式排列所有窗口 */
    // mdiArea->cascadeSubWindows();
    /* 以平铺方式排列所有窗口 */
    mdiArea->tileSubWindows();
}

MainWindow::~MainWindow()
{
}

8.9 QDockWidget: 停靠窗体部件

QDockWidget 继承 QWidget。 QDockWidget 类提供了一个小部件，可以停靠在 QMainWindow 内，也可以作为桌面的顶级窗口浮动。 QDockWidget 提供了停靠部件的概念，也称为工具面板或实用程序窗口。停靠窗口是放置在 QMainWindow 中央窗口附近的停靠窗口部件区域中的辅助窗口。

案例：停靠窗口

例 39_qdockwidget，停靠窗口（难度：简单），本例创建一个停靠窗口，在停靠窗口里添加文本编辑框，并且把这个停靠窗口放置到 QMainWindow 的顶部。

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置主窗体的显示的位置与大小 */
    this->setGeometry(0, 0, 800, 480);

    /* 实例化标题为停靠窗口 */
    dockWidget = new QDockWidget("停靠窗口", this);

    /* 实例化文本编辑框 */
    textEdit = new QTextEdit(dockWidget);

    textEdit->setText("这是一个测试");

    /* 停靠窗口添加文本编辑框 */
    dockWidget->setWidget(textEdit);

    /* 放在主窗体的顶部 */
    this->addDockWidget(Qt::TopDockWidgetArea, dockWidget);
}

MainWindow::~MainWindow()
{
}