QTabBar与QStackedWidget组合优化界面（纯代码版）

一、前言

最近在进行嵌入式界面的开发，本来想用QTabWiget来实现多界面切换显示，但是不太好美化tab框，所以就想着用QTabBar+QStackedWidget组合，借助connect函数关联这两个控件实现tab切换，这样就可以简便地单独将QTabBar修改成好看的样式。

先看效果图：

如果你可以单用一个QTabWiget就可以弄出好看的样式，就没必要往下看了。

二、QTabBar的样式美化

QSS样式表中先对所有tab标签美化：

QTabBar::tab {min-width:120px;  //最小宽度
              min-height:60px;  //最小高度
              color:skyblue;    //文本颜色
              background-color:white;  //背景颜色
              font:18px;        //字体大小
              border: 1px;      //边框大小
             }

为了将两端的tab设置成有弧度的，设置第一个tab和最后；一个tab样式表：

QTabBar::tab:first{border-top-left-radius:30px;border-bottom-left-radius:30px;}

QTabBar::tab:last{border-top-right-radius:30px;border-bottom-right-radius:30px;}

为了tab之间设置成有间隙，样式表如下：

QTabBar::tab:!first{margin-left:2px;border:0px;}

最后再加一个选中tab后的样式表：

QTabBar::tab:selected{background-color:royalblue;color:white;font:18px;}

三、源码

1. 首先新建一个以Qwidget为基类，且取消ui文件生成的使用的项目

2. 编写 .h文件代码如下：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QStackedWidget>
#include <QTabBar>
#include <QVBoxLayout>
#include <QLabel>

class Widget : public QWidget
{
    Q_OBJECT

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

protected slots:
    void currentindexset(int row);

private:

    QVBoxLayout *p_mainlayout;          //最终显示的最外面的垂直布局
    QStackedWidget *p_stackedwidgets;
    QTabBar *p_tabbar;

    QLabel *label1;
    QLabel *label2;
    QLabel *label3;
};
#endif // WIDGET_H

3. 编写.cpp文件代码如下：

#include "Widget.h"
Widget::Widget(QWidget *parent)
    : QWidget(parent)
{


    p_mainlayout = new QVBoxLayout(this);  //设置垂直布局为父控件，其它控件均放入其中
    p_mainlayout->setContentsMargins(2,2,2,2);
    p_mainlayout->setSpacing(5);  //设置控件之间的间隔

    p_tabbar = new QTabBar(this);
    p_tabbar->addTab("标签1");
    p_tabbar->addTab("标签2");
    p_tabbar->addTab("标签3");

//    p_tabbar->setShape(QTabBar::RoundedNorth);
    p_tabbar->setCurrentIndex(0);
    p_tabbar->setStyleSheet("QTabBar::tab {min-width:120px;min-height:60px;color:skyblue;background-color:white;font:18px;border: 1px;} QTabBar::tab:first{border-top-left-radius:30px;border-bottom-left-radius:30px;} QTabBar::tab:last{border-top-right-radius:30px;border-bottom-right-radius:30px;} QTabBar::tab:!first{margin-left:2px;border:0px;}QTabBar::tab:selected{background-color:royalblue;color:white;font:18px;}");
    p_tabbar->setFocusPolicy(Qt::NoFocus);

    //分别加入三个tab界面
    label1 = new QLabel("文本1");
    label2 = new QLabel("文本2");
    label3 = new QLabel("文本3");

    label1->setStyleSheet("QLabel { background:lightskyblue; font: 18pt ; font-weight:bold; color:white; border-width:3; border-color:steelblue;  border-style:solid; border-radius: 5px; qproperty-alignment: 'AlignCenter';}");
    label2->setStyleSheet("QLabel { background:yellow; font: 18pt ; font-weight:bold; color:white; border-width:3; border-color:steelblue;  border-style:solid; border-radius: 5px; qproperty-alignment: 'AlignCenter';}");
    label3->setStyleSheet("QLabel { background:red; font: 18pt ; font-weight:bold; color:white; border-width:3; border-color:steelblue;  border-style:solid; border-radius: 5px; qproperty-alignment: 'AlignCenter';}");

    p_stackedwidgets = new QStackedWidget(this);
    p_stackedwidgets->setStyleSheet("QStackedWidget { border-width:3; border-color:forestgreen;  border-style:solid; border-radius: 5px;}");

    p_stackedwidgets->addWidget(label1);
    p_stackedwidgets->addWidget(label2);
    p_stackedwidgets->addWidget(label3);



    p_mainlayout->addWidget(p_tabbar);
    p_mainlayout->addWidget(p_stackedwidgets);

    p_mainlayout->setStretchFactor(p_tabbar, 1);
    p_mainlayout->setStretchFactor(p_stackedwidgets, 3);
    setLayout(p_mainlayout);
    connect(p_tabbar, SIGNAL(currentChanged(int)),this ,SLOT(currentindexset(int)));
}

Widget::~Widget()
{
}

void Widget::currentindexset(int row)
{
    p_stackedwidgets->setCurrentIndex(row);
}