QtWidgets镜像 qtabwidget

备注：文中夹杂着英文是因为软件里面的名词就是英文的。

0.显示效果

360的界面就是类似QTabWidget类。通过按上面不同的图标，下面会出现不同的界面。

下面也是通过QTabWidget类实现的。

1.新建工程

新建一个以QMainWindow为基类的工程。

2.界面设置

点击【mainwindow.ui】进入设计师界面，因为我想要设计的选择栏是在上方， 展示界面在下方，所以centralwidget的布局应该是垂直布局（Vertical Layout）的。如果想要左右分布的形式，则应该选择水平布局（Horizontal Layout）。

先拖入一个Vertical Layout，不然centralwidget没办法设置为垂直布局。

点击右边的对象窗格中的【centralwidget】，然后点击工具栏的【垂直布局】，会发现它的图标变成了三个横杠。

拖入一个Label控件【Display Widgets】和Tab Widget控件【Containers】，分上下排列。

可以通过右键点击Tab1或者Tab2进入【插入页】的操作，获得更多的页面。按Ctrl+S对UI界面进行保存设置。

3.重要函数

1）设置标题

ui->tabWidget->setTabText(0,"123");

界面的序号从0开始算起，设置序号0页面的标题为“123”。

2）设置页面布局

在头文件添加QVBoxLayout声明，待会作为页面1的布局。记得前面添加头文件#include<QVBoxLayout>。

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    label1 = new QLabel("这是页面1上半部分");
    label2 = new QLabel("这是页面1下半部分");
    label3 = new QLabel("test3");
    label4 = new QLabel("test4");
    ui->tabWidget->setTabText(0,"页面1");

    tab1Layout = new QVBoxLayout;       //声明一个垂直布局
    tab1Layout->addWidget(label1);      //添加两个文本控件
    tab1Layout->addWidget(label2);
    ui->tab1->setLayout(tab1Layout);    //将tab1Layout设定为页面1的布局
}

通过setLayout函数将垂直布局设置为页面1的布局，其中tab1就是在UI界面设定的对象名。一般复杂的页面就是通过布局的叠加，布局中含有子布局，

3）设置标签位置

默认情况下，标签栏都是展示在页面区域的上方，但可以通过setTabPosition函数将其设置在其他位置。

可选参数有4个，分别是上方、下方、左方、右方。对应北南西东方。示例代码将标签栏设置在页面西方，即左方。

ui->tabWidget->setTabPosition(QTabWidget::West); //设置在左边

4）设置标签形状

setTabShape函数设置标签，两个参数可选，QTabWidget::Rounded和QTabWidget::Triangular，默认是前者。Triangular三角形如下图所示。

5）设置标签图标：setTabIcon函数

6）选择页面：通过 setCurrentWidget() 或者setCurrentIndex()可以展示特定的界面

7）页面选择信号：当用户选择某一个页面，信号currentChanged() 会发出

4.通过代码创建页面

之前都是通过拖拽的方式建立页面的，接下来介绍通过代码的方式建立页面。

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    label1 = new QLabel("这是页面3上半部分");
    label2 = new QLabel("这是页面3下半部分");
    label3 = new QLabel("test3");
    label4 = new QLabel("test4");

    ui->tabWidget->setTabText(0,"页面1");
    //ui->tabWidget->setTabPosition(QTabWidget::West);
    //ui->tabWidget->setTabShape(QTabWidget::Triangular)
   // ui->tab1->setLayout(tab1Layout);    //将tab1Layout设定为页面1的布局

    /*通过代码建立页面代码示例*/
    QWidget *tab3 = new QWidget();    //新建一个Widget
    tab3Layout = new QVBoxLayout;       //声明一个垂直布局
    tab3Layout->addWidget(label1);      //添加两个文本控件
    tab3Layout->addWidget(label2);
    tab3->setLayout(tab3Layout);

    ui->tabWidget->addTab(tab3,"页面3"); //向TabWidget添加页面3

}