首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Qt中,如何通过qss定制如下QTabWidget?

在Qt中,QSS(Qt Style Sheets)是一种类似于CSS的样式表语言,用于定制Qt控件的外观。要使用QSS定制QTabWidget,你需要编写一个QSS样式表字符串,并将其应用到QTabWidget上。以下是一个简单的例子,展示了如何通过QSS定制QTabWidget的样式:

代码语言:javascript
复制
#include <QApplication>
#include <QTabWidget>
#include <QWidget>
#include <QVBoxLayout>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    // 创建一个QTabWidget实例
    QTabWidget tabWidget;

    // 添加两个标签页
    QWidget *tab1 = new QWidget();
    QWidget *tab2 = new QWidget();
    tabWidget.addTab(tab1, "Tab 1");
    tabWidget.addTab(tab2, "Tab 2");

    // 编写QSS样式表字符串
    QString qss = R"(
        QTabWidget::pane {
            border: 1px solid #C2C7CB;
            top: -1px;
        }
        QTabWidget::tab-bar {
            alignment: center;
        }
        QTabBar::tab {
            background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
            border: 1px solid #C4C4C3;
            border-bottom-color: #C2C7CB;
            padding: 0 15px;
            margin-right: -1px;
        }
        QTabBar::tab:selected, QTabBar::tab:hover {
            background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                stop: 0 #FFFFFF, stop: 0.4 #F4F4F4,
                stop: 0.5 #E7E7E7, stop: 1.0 #DEDEDE);
        }
        QTabBar::tab:selected {
            border-color: #9B9B9B;
            border-bottom-color: #C2C7CB;
        }
        QTabBar::tab:!selected {
            margin-top: 2px;
        }
    )";

    // 应用QSS样式表到QTabWidget
    tabWidget.setStyleSheet(qss);

    // 显示QTabWidget
    tabWidget.show();

    return app.exec();
}

在这个例子中,我们创建了一个QTabWidget实例,并添加了两个标签页。然后,我们编写了一个QSS样式表字符串,定义了QTabWidget及其子控件(如标签栏和标签)的样式。最后,我们使用setStyleSheet()方法将QSS样式表应用到QTabWidget上。

这个例子中的QSS样式表定义了以下样式:

  • QTabWidget的边框颜色和位置。
  • 标签栏的对齐方式。
  • 标签的背景颜色、边框颜色、内边距和外边距。
  • 选中标签和悬停标签的背景颜色。
  • 选中标签的边框颜色。
  • 未选中标签的上边距。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Qt控件-QListWidget

QListWidget去掉选中虚线框 虚线框如下所示,选中某项之后,文字包围一个虚线框, 修改QSS,添加outline约束即可, QListView { /*border...浅谈之三十五仿QQ设置面板功能,博主的界面长这样, 原文是这样设计的:上面的导航切换选项卡使用QTabWidget,左侧导航使用QListWidget,右侧的显示区域使用QScrollArea...滑动过的区域,通过垂直滚动条的setSliderPosition方法设置QScrollArea的新的区域。...功能区,我这里称之为面板容器,原文博主选择用QScrollArea作为容器,我这里打算采用QListWidget来实现这个容器, (录屏软件超级录屏,然后用迅雷看看转换成gif格式) 先看一下自定义窗口设置...才可以正常渲染item,如下所示,不设置sizehint,当窗口大小超过item默认大小(30pix左右),qss仅渲染默认部分。

89040
  • Qt Style Sheet实践(一):按钮及关联菜单

    QSS和CSS的语法几乎一致,除了Qt自身增加的一些属性之外,其余的属性都可以CSS2或CSS3找到对应的属性。因此,如果曾经有过CSS的使用经验,那么QSS的使用将游刃有余。...QSS介绍      QSS(Qt Style Sheet)借鉴于CSS的良好思想,实现了界面和逻辑的分离。QSS引入了盒模型(Box Model)概念,这是样式表技术的核心概念之一。...使用盒模型进行设计之前,我们得了解下Qt哪些组件可以用盒模型进行布局设计: QCheckBox QCheckBox的勾选符号可以使用::indicator子组件来定制。...应用实例      下面看看如何QSS对按钮及其关联菜单进行外观定制。...效果如何呢: ?        根据不同的需要,定制出来的外观也是千差万别的。主要是能理解好QSS各种属性的作用,其余的工作就是做好布局设计和图片设计。

    4.5K50

    C++ Qt开发:Tab与Tree组件实现分页菜单

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,Qt我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍tabWidget...1.1 TabWidget QTabWidgetQt 的一个用于显示多个页面的小部件,其中每个页面通常包含不同的内容。每个页面与一个标签相关联,用户可以通过点击标签来切换不同的页面。...自定义标签页: QTabWidget 允许通过添加小部件(如按钮、文本框等)作为标签页,以定制标签页的外观和功能。...首先在Qt的UI编辑界面左侧加入TreeWidget组件,右侧加入TabWidget组件,将页面的TabWidget组件增加指定页,整体页面布局如下所示; 要实现对页面的美化只需要在代码中进行调整,...MainWindow::MainWindow主函数我们对其中的两个组件进行初始化操作,并通过setText设置标签名,通过setIcon设置图标组,最后通过expandAll执行刷新到页面,其核心代码如下所示

    55921

    qt 如何设计好布局和漂亮的界面。

    这时候,你可能要问这里的布局和刚才的布局一样吗,是一样的,不过在这里,可以更快速的对组件进行布局,比如下面这样: ? ?...然而,如果希望松开鼠标时才改变其大小,可以设置下面的参数,取消其勾选状态即可,效果如下(左面打勾): ? 关于布局相关的组件或者工具就写到这里,下面是一些我做的例子。...二.Qt样式表QSS ​       Qt自带一个纯天然的皮肤功能QSS,也就是Qt版CSS。就算没有美工你也能轻松做出酷炫的界面,完整的官方文档可查看文字开头蓝色链接,这里仅常用的语法做一个引入。...选择器类型 不知你是否经历过一个界面设置背景图片,但界面上的组件,例如按钮的背景也会被设置为该背景图,如下图所示,这是由于选择器导致的问题。 ?...大多数浏览器呈现为实线。 ?dashed 定义虚线。大多数浏览器呈现为实线。 ?solid 定义实线。 ?double 定义双线。双线的宽度等于 border-width 的值。 ?

    9.3K41

    C++ Qt开发:PushButton按钮组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,Qt我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QPushButton...; 1.2 图形界面创建 通过图形界面的创建很简单,只需要拖拽控件Qt会帮我们做完所有的工作,这里我们就重点说说QtQSS组件库的使用,Qt Style Sheets(QSS)是一种用于定义Qt应用程序外观和样式的样式表语言...类似于HTML和CSS的样式表,QSS允许开发者通过简单的样式规则来定义Qt界面的外观,包括控件的颜色、字体、边框、背景等。...QSS可以通过组件上直接追加属性的方式实现,通过使用setStyleSheet属性可以很容易的对特定的组件进行着色操作,如下我们将第一个pushButton设置为黄色可以这样写; //设置pushButton...; 当然这样的配色显然是无法正常使用的,如果读者学过前端应该知道使用CSS如何美化按钮,QSS也支持CSS的各种事件,我们以按钮的普通状态,按下抬起为例,将如下QSS设置到组件上。

    77410

    C++ Qt开发:Tab与Tree组件实现分页菜单

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,Qt我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍tabWidget...切换页面: 用户可以通过点击标签页来切换显示不同的页面,使得只有一个页面处于可见状态。自定义标签页: QTabWidget 允许通过添加小部件(如按钮、文本框等)作为标签页,以定制标签页的外观和功能。...,如下图我们分别创建了四个选择夹,并实现了分页展示的效果;1.2 TreeWidgetQTreeWidget 是 Qt 的一个用于显示树形结构的小部件。...首先在Qt的UI编辑界面左侧加入TreeWidget组件,右侧加入TabWidget组件,将页面的TabWidget组件增加指定页,整体页面布局如下所示;要实现对页面的美化只需要在代码中进行调整,MainWindow...::MainWindow主函数我们对其中的两个组件进行初始化操作,并通过setText设置标签名,通过setIcon设置图标组,最后通过expandAll执行刷新到页面,其核心代码如下所示;#include

    36921

    Qt写软件系列三:一个简单的系统工具之界面美化

    前言      在上一篇,我们基本上完成了主要功能的实现,剩下的一些导出、进程子模块信息等功能,留到后面再来慢慢实现。这一篇来讲述如何对主界面进行个性化的定制。...那么,如何Qt来对软件界面进行美化呢?...界面个性化定制      Qt开发中有两种方法来进行UI定制Qt二维绘图(Qt  2D drawing and painting)以及Qt样式表(Qt Style Sheet)。...因为Qt里面的数据分很多种: ?       我们得指明,当数据是用来显示单元格的时候,我们才设置对齐方式啊。不然的话就会乱套了。总之,QSS和2D绘图用好了,界面的效果也会慢慢炫起来。...但是链接的时候出错了: ?       fromStdWString无法解析的外部符号!解决方案如下:后面也有一些链接,至于为什么,我也一直没看懂。 ? 截图及代码 ?

    5.8K70

    Qt Style Sheet实践(三):QCheckBox和QRadioButton

    单选按钮和复选框应用广泛,WEB表单、软件配置界面常常是不可或缺的元素。这篇博文主要讲述Qt单选按钮和复选框如何通过样式表进行外观定制。...QButtonGroup是一个容器组件,Qt Designer我们找不到这个组件,因为它是不可见的,仅仅是在后台工作的无名英雄。...具体参见《QT获取选中的radioButton的两种方法》及《QT根据ID设置radio按钮》。       如何进行样式定制呢?QRadioButton定制分成两个两个部分:选中按钮和文本。...我们自己编写的QSS代码如下: QRadioButton { spacing: 5px; font-size: 14px; color: rgb(24, 220, 88); # 连同 font-size...对于复选框我们编写如下QSS代码: QCheckBox { spacing: 5px; # 在这里我们也可以设置复选的文本样式 } QCheckBox::indicator { width:

    9.4K60

    C++ Qt开发:MdiArea多窗体组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,Qt我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍MdiArea组件的常用方法及灵活运用...该组件主要用于设计多文档界面应用程序,具备有多种窗体展示风格,实现了父窗体内嵌多种子窗体的功能,使开发者能够轻松地创建支持多个文档的应用程序。...Dialog对话框,并对该对话框进行一定的定制,首先绘制如下案例,其顶部是一个QToolBar组件,底部则是一个QMidArea组件,如下图; 接着我们需要以此对上述菜单绑定一个唯一的名称及文本,这个过程可以通过代码实现...,也可以通过图形化配置,如下图我们直接通过图形化模式增加其功能; 1.1 初始化控件 如下代码,使用QMdiArea创建多文档界面的MainWindow类的构造函数和析构函数。...子窗口模式下,QMdiArea管理并显示各个子窗口,允许用户同时查看和编辑多个文档。 析构函数: 析构函数执行了 delete ui;,确保在对象销毁时释放与ui相关的资源,避免内存泄漏。

    1.2K10

    qt tabwidget切换_标签怎么新窗口打开

    1、增加选项卡的addTab方法 addTab用于给QTabWidget增加一个选项卡,选项卡位置现所有选项卡后面,调用语法如下: int addTab(QWidget page, str label...可以看到用鼠标点击不同的标题时会出现不同的页面内容 A.Qt的多页面切换组件QTabWidget Qt为多页面切换的实现提供了一个专门的类QTabWidget,它可以实现能够同一个窗口中自由切换不同页面的内容...QTabWidget的使用方式–Qt的应用程序创建QTabWidget的对象,将其他的QWiget对象加入该对象(QTabWidget对象中加入一个组件将生成一个新的页面,同时QTabWidget.... 1.能够同一窗口中自由切换不同页面的内容 2.是一个容器类型的组件,同时提供友好的页面切换方式 Qt–多页面切换组件 QTabWidget的使用方式 1.应用程序创建QTabWidget...的对象 2.将其他QWidget对象加入该对象 实现过程 1.创建容器类的组件对象 2.将多个子组件容器对象布局 3.将容器对象加入QTabWidget中生成新的页面 Qt–多页面切换组件

    3.7K30

    Ubuntu如何通过Snap安装MakeMKV

    MakeMKV,可以用蓝光光碟和DVD制作MKV,现在可以通过Ubuntu 18.04及更高版本的Snap软件包轻松安装。   Snap是大多数Linux桌面上运行的容器化软件包。...因此,可以通过Snappy Store或在终端运行单个命令轻松地安装它。  ...Ubuntu安装MakeMKV snap:   1、)不知道为什么,但是Ubuntu 18.04的Ubuntu软件找不到makemkv。...但是,可以通过终端运行单个命令来安装它(通过Ctrl + Alt + T打开终端):   snap install makemkv   2、) 还需要一个命令来连接到硬件观察接口:   sudo snap...connect makemkv:hardware-observe   (可选)由于任何原因,您可以通过终端运行命令来轻松删除MakeMKV snap软件包:   snap remove makemkv

    64220

    Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全

    导读       行文本输入框在用于界面的文本输入,WEB登录表单应用广泛。一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器。...于是这篇博文主要讲解如何对行文本编辑框QLineEdit进行定制。 基本定制       为了简化工作,还是如同前面所说的,直接用Qt Designer拖一个QLineEdit进行编辑。...默认情况下,当行编辑框用于密码输入时,其效果如下: ?       利用QSS的lineedit-password-character属性,我们可以更改密文显示字符内容。...WEB表单也经常可以看到其的身影,如下是腾讯某产品的一个注册页面: ?       当用户输入邮箱名的时候,编辑框会自动补全邮箱后缀部分。...WEB前端开发,这样的功能已经有相关的JS提供,直接调用就可以实现。我们接下来就是尝试实现Qt版的邮箱补全功能。       说实话,Qt下面的自动补全功能实现起来更加简单。

    2.7K80

    Qt编写安防视频监控系统11-动态换肤

    一、前言 Qt的动态换肤技术是非常一流的,直接调用qApp->setStyleSheet(qss);就可以对整个应用程序进行换肤,如果样式表内容不多,或者对应的贴图不对,效率还是蛮好的,不过据说有些人写了几千行的样式表...设置样式表的过程,有时候会忘记对某些控件进行背景颜色的设置,我一般喜欢采用qApp->setPalette();来弥补这个缺陷,调用此方法以后,整体的背景颜色被统一设置成了一样的,统一美观。...通过控制主机,操作人员可发出指令,对云台的上、下、左、右的动作进行控制及对镜头进行调焦变倍的操作,并可通过控制主机实现在多路摄像机及云台之间的切换。...pro文件可以自由开启是否加载地图。 视频播放可选四种内核自由切换,vlc+ffmpeg+easyplayer+海康sdk,均可在pro设置。...高度可定制化,用户可以很方便的在此基础上衍生自己的功能,支持linux系统。

    1.3K40

    Qt Style Sheet实践(二):组合框QComboBox的定制

    显然,用户既可以自己手动输入新的QQ号码,也可以列表框中选择历史输入记录。对于提高用户体验是一个不错的手段。这篇博文重点讲述如何QSS对组合框进行定制。...基本自定义      组合框的使用非常简单,为了加快叙述速度,我们直接在Qt Designer拖一个QComboBox控件放到主窗口中。...当然了,::drop-down子组件的定制,我们将subcontrol-position属性设置成了top, right。这样按钮就位于最右边了。如果希望将按钮置于最左边显然也很简单。...显然,下拉框的选项高度太小了,看起来挺别扭的。那么如何对下拉框进行定制呢?我们有个很好的模仿对象: ?      360安全卫士的登录框的下拉框看起来就挺不错,而且还有图标出现在选项的右边。...这样,当用户点击了选项的某一个选项时,能够QComboBox的文本框显示选中的项。那么,QSS如何编写呢?

    7.8K70

    Qt写软件系列五:一个安全防护软件的制作(3)

    不过值得注意的是,QSplitter是一个窗口管理类,没有添加子控件是看不到QSplitter效果的。这一点Qt Designer也可以验证。       ...我们的项目中,我们增加一个QSplitter类成员,并在主窗口的构造函数添加如下代码: splitter = new QSplitter(Qt::Horizontal, this); splitter...QStackedWidget实例,initStackedWidget(),用addWidget陆续添加了7个子控件。...那么,Tab选项卡又是如何实现的呢?继承QTabWidget类。QTabWidget也是一个容器类,可以添加很多子控件。每一个控件都是一个Tab了。...这么说来,QTabWidget和QStackedWidget的结构是非常相似的。其实,编写Qt程序的时候,我们要组合一个窗口其实是非常简单的。

    1.7K90

    Python桌面图形程序美化的方法论

    不引入任何 CSS 和 JavaScript 的情况下,HTML 编写的任何标签,浏览器显示的都是最原始的形状和样式。...如何解决,州的先生根据实际经验给出如下的建议: 有一个好的设计原型 不是要大家去兼修 UI 设计,而是构建一个图形界面之前,对程序的布局,结构有一个清晰明确的原型。...充分利用QSS Qt 提供了 QSS 这个特性让开发者可以自定义小部件的外观,其支持各种属性、子状态和控件。 充分利用好 QSS 来配置界面,图形界面的美化工作可以完成 80% 到 90%。...同时,Qt 官方文档还提供了很多控件使用 QSS 美化的示例,大家也可以参考一下,链接为: https://doc.qt.io/qtforpython/overviews/stylesheet-examples.html...在此个例子: QProgressBar()是进度栏控件,它的默认样式如下图所示: ? 我们官方文档可以看到它有如下的方法可供调用: ?

    2.3K31

    Qt5.5.1版本QString().arg()和qss处理路径及文件名需要注意的地方

    一、问题 在工作的时候,需要做一个带有图片的按钮,加载图片的时候,出现加载不上的问题 二、使用测试文件复原问题场景 文件名称:"金果园1#(20180202182916)(20180202185154...有没有发现问题,怎么跟期望不一样呢,文件名字的地方,原始路径下是个什么字符呢?...是一个“%1”字符 原因: Qt .arg方法,转义和拼接字符串的时候,会从前往后进行转义拼接,当转义过后的字符串存在%1、%2这种字符,会认为是转义符,然后把后面的字符串 转义到此处,所以路径当中尽量不要携带这些字符...三、qss使用的时候需要注意的地方 问题代码: QString sStyle = QString("QPushButton{border-image: url(%1);}").arg(sImagePath...的机制问题,QPushButton 的qss样式表的url不能包含%字符,如果包含此字符 会导致设置style的时候解析失败。

    1.1K20

    Qt开源作品13-三套样式表

    一、前言 在做各种各样的项目中,难免遇到需要设定自己界面风格样式的时候,而Qt提供的qss就是牛逼的为了实现定制各种各样的皮肤的,其实一个完美的UI界面,主要由两大块组成,一个是颜色搭配,一个是布局,这两个缺一不可...,一般是交给专业的美工妹妹来做,大部分程序员审美不是很好,所以没有美工妹妹的时候,需要去一些专业的UI界面网站寻找灵感。...之前用Qt做过一个皮肤生成器,可以用它来快速制作皮肤,最快的时候一套皮肤只需要58秒钟,用皮肤生成器制作皮肤,基本上不超过一分钟就可以生成一套自己想要的皮肤,只要设置八种颜色即可。...file(":/qss/flatwhite.css"); QFile file(":/qss/lightblue.css"); if (file.open(QFile::ReadOnly...)) { QString qss = QLatin1String(file.readAll()); QString paletteColor = qss.mid(20,

    2K40
    领券