Qt绘制chrome风格的Tab标签

已于 2023-01-31 13:22:17 修改
阅读量3.4k 收藏 20
点赞数 4
分类专栏： Qt 文章标签： qt chrome 开发语言
于 2020-01-08 22:14:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SLAMD_1/article/details/103898267
版权

Qt实现类似于Chrome风格的Tab标签

前言

Qt中改变现有的控件的外观有多种方式，最常见的是使用样式表，根据样式表中的各种选择器并对属性、状态和sub-control进行样式的修改，也是比较方便的方式。最近由于要使用cef进行一个多标签浏览器的开发，需要修改tab的外观，这里使用QStyle来进行修改。

QStyle

Qt中对于QStyle的简单描述
简单来说就是Qstyle是一个抽象类，封装了不同平台上的GUI的外观。对于QStyle的详细介绍，请参考其他的资料或者Qt的帮助文档，百度一大堆。
QProxyStyle实现了QStyle所有的抽象接口,并且默认保持系统风格。

这里我们继承一个QProxStyle，然后实现其中两个接口便可实现。
第一个是sizeFromContent，返回控件的大小，函数原型如下：


virtual QSize sizeFromContents(ContentsType type, const QStyleOptio *option, const QSize &size, const QWidget *widget) const

第二个是drawControl，用于绘制控件的元素。函数原型如下：


virtual void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget = Q_NULLPTR) const

效果图

设置后的效果图
效果图2

绘制代码中的思路

比较笨的控制大小，数格子！！
由windows自带的画图数格子，然后用整体的大小确定比例，用比例绘制比较妥。
在这里插入图片描述

方式1

很明显了吧，
方式1

方式2

其实和方式1一样，只是椭圆不一样。高度比较小的时候，两者看着都差不多，我都试过。
方式2

方式3

二次贝塞尔曲线，就很简单。绘制出来可以说和chome基本一样
效果：
方式3效果
代码：

void Widget::drawShape1(QPainter *p, const QRect &drawRect)
{
    QRectF r(drawRect);

    qreal per = r.height() / 8.0;
    qreal topMargin = 4.0;

    QPainterPath path;
    path.moveTo(r.bottomLeft() - QPointF(per, 0));
    path.quadTo(QPointF(r.left(), r.bottom()),
                QPointF(r.left(), r.bottom() - per));
    path.lineTo(r.left(), r.top() + per + topMargin);
    path.quadTo(QPointF(r.left() , r.top() + topMargin),
                QPointF(r.left() +  per, r.top() + topMargin));
    path.lineTo(r.right() - per, r.top() + topMargin);
    path.quadTo(QPointF(r.right(), r.top() + topMargin),
                QPointF(r.right(), r.top() + per + topMargin));
    path.lineTo(r.right(), r.bottom() - per);
    path.quadTo(QPointF(r.right(), r.bottom()),
                r.bottomRight() + QPointF(per, 0));

    p->setRenderHint(QPainter::Antialiasing);
    p->setBrush(Qt::green);
    p->drawPath(path);
}

void Widget::drawShape2(QPainter *p, const QRect &drawRect)
{
    QRectF r(drawRect);

    qreal per = r.height() / 8.0;
    qreal topMargin = 4.0;

    QPainterPath path;
    path.moveTo(r.bottomLeft() + QPointF(per, 0));
    path.quadTo(QPointF(r.left(), r.bottom()),
                QPointF(r.left(), r.bottom() - per));
    path.lineTo(r.left(), r.top() + per + topMargin);
    path.quadTo(QPointF(r.left(), r.top() + topMargin),
                QPointF(r.left() - per, r.top() + topMargin));
    path.lineTo(r.right() - per, r.top() + topMargin);
    path.quadTo(QPointF(r.right(), r.top() + topMargin),
                QPointF(r.right(), r.top() + per + topMargin));
    path.lineTo(r.right(), r.bottom() - per);
    path.quadTo(QPointF(r.right(), r.bottom()),
                r.bottomRight() + QPointF(per, 0 ));

    p->setRenderHint(QPainter::Antialiasing);
    p->setBrush(Qt::red);
    p->drawPath(path);
}

实现代码

控件大小

QSize NewChromeTabStyle::sizeFromContents(QStyle::ContentsType ct, const QStyleOption *opt,
                                          const QSize &contentsSize, const QWidget *w) const
{
//    return QProxyStyle::sizeFromContents(ct, opt, contentsSize, w);
    QSize s = QProxyStyle::sizeFromContents(ct, opt, contentsSize, w);
    if (ct == QStyle::CT_TabBarTab) {
//        s.transpose();
        s.rwidth() = contentsSize.width();
        s.rheight() = 32;
    }
    return s;
}

绘制样式

void NewChromeTabStyle::drawControl(QStyle::ControlElement element, const QStyleOption *option,
                                    QPainter *painter, const QWidget *w) const
{
    painter->save();
    painter->setPen(Qt::red);
//    painter->drawRect(w->rect());
    painter->restore();
    switch (element) {
    case CE_TabBarTabLabel:
    {
        const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option);
        QRect textRect = subElementRect(QStyle::SE_TabBarTabText, tab, w);

        if (tab->state & QStyle::State_Selected) {
            painter->save();
            painter->setPen(QPen("#000000"));
            QTextOption option(Qt::AlignLeft | Qt::AlignVCenter);
            option.setWrapMode(QTextOption::NoWrap);
            painter->drawText(textRect, tab->text, option);
            painter->restore();
        }
        else if(tab->state & QStyle::State_MouseOver) {
            painter->save();
            painter->setPen(QPen("#000000"));
            QTextOption option(Qt::AlignLeft | Qt::AlignVCenter);
            option.setWrapMode(QTextOption::NoWrap);
            painter->drawText(textRect, tab->text, option);
            painter->restore();
        }
        else
        {
            painter->save();
            painter->setPen(QPen("#666666"));
            QTextOption option(Qt::AlignLeft | Qt::AlignVCenter);
            option.setWrapMode(QTextOption::NoWrap);
            painter->drawText(textRect, tab->text, option);
            painter->restore();
        }
    }
        break;
    case CE_TabBarTabShape:
    {
        const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option);
        // Set Anti-aliasing effect
        painter->setRenderHint(QPainter::Antialiasing);

        QRectF shapeRect = tab->rect;
        qreal arcLen = shapeRect.height() / 2;

        if (tab->state & QStyle::State_Selected) {
            painter->save();
            QPen pen(Qt::red);
            pen.setWidthF(0.5);
            painter->setPen(pen);
//            painter->drawRect(shapeRect);
            painter->restore();

            painter->save();
            shapeRect.setX(shapeRect.x() - arcLen);
            shapeRect.setWidth(shapeRect.width() + arcLen *3/ 4);

            QPainterPath path;

            QRectF arcRect1(shapeRect.x(),
                            shapeRect.y() + shapeRect.height() / 3,
                            arcLen,
                            shapeRect.height() * 2 / 3);

            path.moveTo(QPointF(arcRect1.x(),
                                 arcRect1.y() + arcRect1.height()));

            path.lineTo(QPointF(arcRect1.x() + arcRect1.width() / 2,
                                 arcRect1.y() + arcRect1.height()));

            // Starting from 270°, returning to the arc of 90°
            path.arcTo(arcRect1, 270.0, 90.0);

            path.lineTo(QPointF(arcRect1.x() + arcRect1.width(),
                                 arcRect1.y()));

            QRectF arcRect2(shapeRect.x() + arcRect1.width(),
                            shapeRect.y(),
                            arcLen,
                            shapeRect.height() * 2 / 3);

            // Starting from 180°, returning to the arc of -90°
            path.arcTo(arcRect2, 180.0, -90.0);

            path.lineTo(QPointF(arcRect2.x() + shapeRect.width() -  2 * (arcRect2.x()  + arcRect2.width()) + arcRect2.width() / 2,
                                 arcRect2.y()));

            QRectF arcRect3(shapeRect.x() + shapeRect.width() - 2 * arcRect1.width(),
                            shapeRect.y(),
                            arcRect1.width(),
                            shapeRect.height() * 2 / 3);

            path.arcTo(arcRect3, 90.0, -90.0);

            path.lineTo(QPointF(arcRect3.x() + arcRect3.width(),
                                 arcRect3.y() + arcRect3.height()));

            QRectF arcRect4(arcRect3.x() + arcRect3.width(),
                            arcRect3.y() + arcRect3.height() / 2,
                            arcRect1.width(),
                            shapeRect.height() * 2 / 3);

            path.arcTo(arcRect4, 180.0, 90.0);

            path.lineTo(QPointF(arcRect1.x(),
                                arcRect1.y() + arcRect1.height()));

            painter->setPen(Qt::NoPen);
            painter->setBrush(Qt::white);
            QPolygonF polygon = path.toFillPolygon();
            painter->drawPolygon(polygon);

            painter->restore();
        }else if(tab->state & QStyle::State_MouseOver)
        {
//            return;
            painter->save();
            QPen pen(Qt::black);
            pen.setWidthF(0.5);
            painter->setPen(pen);
//            painter->drawRect(shapeRect);
            painter->restore();
            painter->save();

            shapeRect.setX(shapeRect.x() - arcLen);
            shapeRect.setWidth(shapeRect.width() + arcLen *3/ 4);

            QPainterPath path;

            QRectF arcRect1(shapeRect.x(),
                            shapeRect.y() + shapeRect.height() / 3,
                            arcLen,
                            shapeRect.height() * 2 / 3);

            path.moveTo(QPointF(arcRect1.x(),
                                 arcRect1.y() + arcRect1.height()));

            path.lineTo(QPointF(arcRect1.x() + arcRect1.width() / 2,
                                 arcRect1.y() + arcRect1.height()));

            // Starting from 270°, returning to the arc of 90°
            path.arcTo(arcRect1, 270.0, 90.0);

            path.lineTo(QPointF(arcRect1.x() + arcRect1.width(),
                                 arcRect1.y()));

            QRectF arcRect2(shapeRect.x() + arcRect1.width(),
                            shapeRect.y(),
                            arcLen,
                            shapeRect.height() * 2 / 3);

            // Starting from 180°, returning to the arc of -90°
            path.arcTo(arcRect2, 180.0, -90.0);

            path.lineTo(QPointF(arcRect2.x() + shapeRect.width() -  2 * (arcRect2.x()  + arcRect2.width()) + arcRect2.width() / 2,
                                 arcRect2.y()));

            QRectF arcRect3(shapeRect.x() + shapeRect.width() - 2 * arcRect1.width(),
                            shapeRect.y(),
                            arcRect1.width(),
                            shapeRect.height() * 2 / 3);

            path.arcTo(arcRect3, 90.0, -90.0);

            path.lineTo(QPointF(arcRect3.x() + arcRect3.width(),
                                 arcRect3.y() + arcRect3.height()));

            QRectF arcRect4(arcRect3.x() + arcRect3.width(),
                            arcRect3.y() + arcRect3.height() / 2,
                            arcRect1.width(),
                            shapeRect.height() * 2 / 3);

            path.arcTo(arcRect4, 180.0, 90.0);

            path.lineTo(QPointF(arcRect1.x(),
                                arcRect1.y() + arcRect1.height()));

            painter->setPen(Qt::NoPen);
            painter->setBrush(QColor("#FBFCFC"));
            QPolygonF polygon = path.toFillPolygon();
            painter->drawPolygon(polygon);

            painter->restore();

        }else
        {
            painter->save();

            shapeRect.setX(shapeRect.x() - arcLen);
            shapeRect.setWidth(shapeRect.width() + arcLen / 2);

            QPen pen(Qt::black);
            pen.setWidthF(0.5);
            painter->setPen(pen);

            /// Draw a dividing line on the left
            painter->drawLine(QPointF(shapeRect.x() + arcLen*2/3 -1, shapeRect.height() / 3),
                              QPointF(shapeRect.x() + arcLen*2/3 -1, shapeRect.height() * 2 / 3));

            /// Draw a dividing line on the right
//            painter->drawLine(baseR.x() + baseR.width() - arcLen,
//                              baseR.height() / 4,
//                              baseR.x() + baseR.width() - arcLen,
//                              baseR.height() * 3 / 4);

            painter->restore();
        }
    }
        break;
    default:
        QProxyStyle::drawControl(element, option, painter, w);
        break;
    }
}

其他

tab的大小

在sizeFromContents函数返回的控件尺寸可以设置成固定的，也可以直接返回默认。
在设置成默认的尺寸以后，每个tab的大小都固定了，这样对于Tab文字比较少的那种，看起来不太友好。仿照嘛，就要仿照得像一点。这里可以结合样式表来动态调整tab的大小。在每次增加和移除tab的时候调用这个函数自动调整tab的大小。

void MainWindow::AdjustTabWidth()
{
    int max_tabwidget_width =  width() - 150;
    tabWidget->tabBar()->setMaximumWidth(max_tabwidget_width);
    // get the average with of the tab
    int average_width = tabWidget->count() > (max_tabwidget_width / MaxTabWidth) ?
                max_tabwidget_width / tabWidget->count() : MaxTabWidth;

    tabWidget->setStyleSheet(QString::fromUtf8("BTabWidget::pane{"
                                               "border:none;"
                                               "}"
                                               "BTabWidget::tab-bar {"
                                               "left: 6px;"
                                               "}"

                                               "QTabBar::tab {"
                                               "min-width:78px;"
                                               "width:%1px;"
                                               "}"
                                               ).arg(average_width));
}

老版本chrome标签样式

也可以用这个绘制老版本的谷歌浏览器的样式。效果图如下。方式也一样，代码就不贴了，也没绘制好，后面的Demo中有实现。
老版本Chrome标签样式
没画好。。。需要这种效果的再改改吧。

最后

完整的Demo: 源代码.
测试Demo。比较乱，如果有需要就凑合着看吧!!🙂

qyslamdd
关注
  • 4
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
仿谷歌浏览器的TabWidget
02-18
仿谷歌浏览器的TabWidget,实现Tab右侧的增加按钮，Tab可拖出，拖动时缩略图显示。用VS2012开发
仿Chrome 风格的TabControl控件
03-01
功能上，除继承TabControl基本功能之外还有： 1、选项卡标签区域更换背景色或使用背景图片 2、选项卡标签在激活与非激活状态下以及鼠标移动到非激活标签上时可自定义三种状态的颜色，且颜色渐变 3、可直接关闭非激活状态下的选项卡，且保持当前激活状态下的标签状态不变 4、可用鼠标拖动选项卡来移动排序位置 5、当选项卡数量超出控件本身宽度时，将进行自动缩放 6、后续还在完善其他功能中……
qt5-入门-标签页部件QTabWidget-2-新增和删除标签页
陆沙的博客
03-25 494
qt5,标签页
tabwidget 动态添加tab页_Infinity新标签页(Pro)
weixin_39590566的博客
12-01 509
新标签页拓展，让你的浏览器不再死板，打造极简、优美的页面，让你优雅的使用浏览器！！！简介：Infinity新标签页是一款基于html5的扩展程序，适用于Chrome、Edge和火狐浏览器，高度自制新标签页。接下来以火狐浏览器为例进行安装和设置：• 安装：https://addons.mozilla.org/zh-CN/firefox/addon/infinity-new-tab-pro-firef...
QTabWidget+QToolBar实现浏览器标签页
周翔的专栏
07-11 7198
直接上代码 /******************************************************************** * author 周翔 * e-mail [email protected] * blog http://blog.csdn.net/zhx6044 *************************************************
Qt 容器控件之Tab Widget 使用详解
热门推荐
陈子青的博客
07-19 1万+
QTabWidget的一种带标签页的窗口，在这种类型的窗口中可以存储多个子窗口，每个子窗口的显示可以通过对应的标签进行切换。//当一个选项卡栏有太多的标签时，选项卡栏可以选择扩大它的大小，或者添加按钮，让标签在选项卡栏中滚动。//判断index对应的选项卡是否是被启用的,如果是被启用的返回true,否则返回false。//如何省略标签栏中的文本,此属性控制在给定的选项卡栏大小没有足够的空间显示项时如何省略项。//如果enable为true，则在索引位置的页面是启用的;......
Qt---定义控件实现细节
临渊羡鱼，不如退而结网
06-23 826
Qt 使用自己的方式绘制组件。然而我们也看到，在不同的平台上，Qt 的组件表现也不相同。这和 Swing 有些类似：Swing 使用 look and feel 表现组件的外观，Qt 也是类似的。用来绘制组件外观的类就是 QStyle。 style实现外观。这里通常有两种实现方式：第一，重写 widget 的 paintEvent() 函数；第二，使用 QStyle 类。两种方式的侧重点不同：重写...
Qt扫盲-QTabWidget理论总结
洪源兄
12-16 4140
1. 简述2. 用法流程3. 选项卡设置3. 页面信息3. 外观4. 扩展。QTabWidget 提供一个选项卡栏和一个“页面区域”，用于显示与每个选项卡相关的页面。默认情况下，选项卡栏显示在页面区域上方，但可以使用不同的配置（可以设置到上下左右）。每个选项卡都与不同的QWidget（称为页面）相关联。页面区域中仅显示当前页面；所有其他页面均处于隐藏状态。用户可以通过单击其选项卡或按其 Alt+字母快捷方式（如果有）来显示不同的页面。
Qt应用开发(基础篇)——选项卡窗口 QTabWidget
波塞冬的博客
08-17 2866
QTabWidget类继承于QWidget，是一个拥有选项卡的窗口部件。QTabWidget类有一个选项卡栏QTabBar和一个页面区域，用来显示和选项卡相关联的界面。用户通过点击选项卡或者自定义快捷方式(ALT+Key)切换页面。
qt tabwidget切换_标签怎么在新窗口打开
hw5230的博客
06-06 1459
/返回当前页面的下标，从0开始. 7.int count();//设置当前显示的页面.QTabWidget的使用方式–在Qt中的应用程序中创建QTabWidget的对象，将其他的QWiget对象加入该对象中(在QTabWidget对象中加入一个组件将生成一个新的页面，同时QTabWidget对象每次只能加入一个QWiget对象)，但是在实际的使用中每个页面会有多个的子组件，这时应该在工程中创建容器类型的组建对象，将多个子组件在容器对象中布局，最后将容器对象加入QTabWidget中生成新的页面.
qtabwidget-dragging-tabs：Qt 5 QTabWidget，其中将选项卡拖动到新窗口并像在浏览器中一样向后拖动
02-25
QTabWidget，在窗口之间具有Draggind选项卡，可在单独的窗口中返回，就像在浏览器中一样。 用Qt 5.12制作
Qt竖向tab标签页面源码
11-07
Qt竖向tab标签页面源码；为什么csdn的分会不断的往上涨呢，我会定期把需要下载的积分降下来，减少大家的下载分数的硬性需求。
Qt 绘制 Smith chart 源码
01-19
Qt5.11.3 QPainter绘制 史密斯圆图(Smith chart) 小程序 可以通过导入txt绘制smith chart 源码 编译就能用
QT通过创建一个DrawControl类可以绘制不同的图形项包括矩形，直线，多边形等
11-14
这是一个QT的demo，通过创建一个绘画控制器可以绘制出不同的图形项包括矩形QGraphicsRectItem， 直线QGraphicsLineItem， 多边形QGraphicsPolygonItem等。 QT版本：5.15.2 VS版本：2019 1、创建一个drawControl类管理所有的图形项包括矩形，直线，多边形等 2、通过drawControl类传入参数自动创建图形项 3、通过通过drawControl类的鼠标事件手动绘制不同的图形项 用法链接：https://menghui666.blog.csdn.net/article/details/134397299?spm=1001.2014.3001.5502 微博主页：https://menghui666.blog.csdn.net/
QT绘制散点图源码.zip
06-05
QT绘制散点图源码
Qt线段绘制并且可以拖动线段绘制
02-10
Qt线段绘制并且可以拖动线段绘制Qt线段绘制并且可以拖动线段绘制Qt线段绘制并且可以拖动线段绘制Qt线段绘制并且可以拖动线段绘制
QT绘制贝塞尔曲线及控制点
05-12
QT绘制贝塞尔曲线及控制点
在Qt creator中使用多光标
最新发布
m0_61629312的博客
04-22 292
键，并用鼠标左键在文本编辑器中选择多个光标位置。你可以选择多个不同的位置，或者选择整个文件中的所有匹配项。然后，你可以在这些光标位置上同时进行编辑，输入相同或不同的文本，或者进行其他编辑操作。多光标模式允许你在同一时间在多个光标位置进行编辑，从而可以更快地进行一些重复性的编辑操作。Qt Creator 支持多光标模式。2024年4月22日，周一下午。要启用多光标模式，请按住。
如何查看项目中使用的Qt版本
qq_19605587的博客
04-19 459
1.点击左下角电脑按钮查看Qt版本。2.点击左侧栏项目按钮查看Qt版本。
qt 中 tebwidget的tab 标签怎么设置间隙
05-30
可以设置QTabBar的样式表来设置Tab标签之间的间隙。可以使用qproperty-margin属性来设置间隙大小。示例代码如下： ```cpp // 获取TabBar对象 QTabBar* tabBar = ui->tabWidget->findChild<QTabBar*>(); // 设置Tab标签之间的间隙 tabBar->setStyleSheet("QTabBar::tab { qproperty-margin: 20px; }"); ``` 上述代码中，设置的间隙大小为20像素。你可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值