tabWidget与tableWidget混合使用（UI设计思路和要点）

      Qt有两个控件名称很相似——tabWidget和tableWidget，前者是容器，可以利用标签进行界面换页，后者是表格控件。巧合的是，实际应用经常二者会混合使用，因此，这里对其要点进行简要说明。

       在进行UI设计时，Qt有两个路线，代码法和UI设计器法，二者互有利弊。为了兼顾效率、可视化、特殊功能需求，可以采用UI设计器为主，代码为辅的开发路线。下面从最基础的布局、自适应大小、颜色样式等方面讲述一个最基础的案例，着重体现关键点的操作，其余读者可根据大致思路自行摸索。

1.拖拽控件，简单布局

拖拽控件上去

这时由于中心控件没用布局，所以TabWidget没有铺满

鼠标点中centalWidget，再点栅格布局

现在看，铺满了

给Tab1拖拽两个TableWidget

在空白处鼠标单击左键一下，再选垂直布局

看，布局成功了

同理，我们在Tab2也拖拽两个TableWidget，这次用水平布局

2.设计一个简单的表格

在Tab2的右边表格控件，鼠标右键，选编辑项目

按+-号，我们设计一个5行两列的表格

点击OK，看效果

表格并没有铺满，在属性编辑器里设置一下

这里horizontal header default section size的意思是水平页眉默认节大小，垂直同理，按右侧小三角，让其铺满窗口

运行一下程序

最大化，发现有问题，没有自适应变大

3.自适应大小

在构造函数里加这样两行代码:

#include "QtTabWidget.h"

QtTabWidget::QtTabWidget(QWidget* parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);

	ui.tableWidget_4->verticalHeader()->setSectionResizeMode(QHeaderView::Stretch);
	ui.tableWidget_4->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
}

QtTabWidget::~QtTabWidget()
{}

顺便把头文件也给出来吧

#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_QtTabWidget.h"

class QtTabWidget : public QMainWindow
{
    Q_OBJECT

public:
    QtTabWidget(QWidget *parent = nullptr);
    ~QtTabWidget();

private:
    Ui::QtTabWidgetClass ui;
};

运行，再看效果，好了！

4.颜色样式

/*设置TabWidget中QTabBar的样式*/
QTabBar{
background-color: rgb(8, 13, 22);
color: rgb(255, 255, 255);
font: 12pt "宋体";
}
QTabBar::tab{
    background-color: rgb(8, 13, 22);
    color: rgb(255, 255, 255);
    font: 12pt "宋体";
    border: 2px solid rgb(0,168,210);
	color:#ced4da;    /*设置tab中的文本的颜色*/
	border-top-left-radius: 5px;    /*设置tab的边框的圆角（左上圆角）*/
	border-top-right-radius: 5px;    /*设置tab的边框的圆角（右上圆角）*/
	min-width: 8px;
	padding: 5px;
    font: bold;
}
 
/*设置TabWidget中QTabBar的tab被选中时的样式*/
QTabBar::tab:selected{
    color: rgb(0,168,210);
    border-bottom: 2px solid rgb(255,255,255);
}
 
 
/*设置TabWidget的边框的样式*/
QTabWidget::pane{
    border: 2px solid rgb(0,168,210);
    border-radius: 5px; /* 边框圆角*/
}

打开属性编辑器里的样式表设置styleSheet，把上面的代码粘贴进去

看，标签样式出来了

其余样式，根据注释，自行修改，去探索吧