Qt之QSlider圆形滑柄样式

最新推荐文章于 2024-05-29 19:00:22 发布
最新推荐文章于 2024-05-29 19:00:22 发布
阅读量2.2k 收藏 4
点赞数 2
分类专栏： Qt基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YinShiJiaW/article/details/105353828
版权

简述

QSlider的滑柄样式设计遵循box model，但是在设计的过程中，我发现，边界的宽度变化会对滑柄高度造成挤压，这种挤压使得滑柄样式设计需要一些特殊处理。下面以圆形滑柄样式设计来介绍这种挤压的处理方法。

挤压

通常border的变化不会对contents造成影响，以QPushButton为例，如下所示：

但是在QSlider的handle中却会出现如下情况

contents的水平尺寸没变，但是垂直尺寸却被边界挤压了。

设计圆形滑柄

要设计圆形滑柄，先要准备一个border和contents都是正方形的滑柄。由于垂直方向的contents被border占据了一部分，所以contents的垂直尺寸要比水平尺寸大两倍的边界宽度。contents的垂直尺寸为滑槽高度和上下边距之和，设计步骤如下：

  • 确定contents水平尺寸
  • 确定边界宽度
  • 调整槽宽度或者上下边距，确保：垂直尺寸=水平尺寸+两倍的边界宽度

当然，可以随意调整，只要满足如下公式：

槽宽度+上下边距=水平尺寸+两倍边界宽度

最终效果如下：

Shijia Yin
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt QSlider样式
xiaoshidiaodejiyi的博客
09-05 6197
  本文章主要学习QSlider样式 准备下面几张背景图片： 调小图标、调大图标、QSlider位置图标 QSlider划过的背景图标、QSlider未划过的背景图标 最终效果图   自己创建一个QSlider工程，此处省略…… 编写mainwindow.h文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <...
Qt基础学习---滑动条之QSlider
weixin_30484247的博客
03-26 420
Qt滑动条基本用法： //mydialog.h #ifndef MYDIALOG_H #define MYDIALOG_H #include <QDialog> class QLineEdit; class QSlider; class MyDialog : public QDialog { Q_OBJECT public: explicit MyDialog(QWidget ...
Qt中用StyleSheet做圆形QSlider的方法解释（应该也适用于CSS等）
qq_38566306的博客
12-09 1701
扩展阅读： （1）以下链接有很丰富的实例，参考价值高： https://blog.csdn.net/wzs250969969/article/details/78458151 （2）详细解释参考（SVG）： https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/radialGradient                   ...
Qt 自定义控件 - 圆形进度条（1）
STIV_的博客
07-01 633
采用Qt实现自绘圆形进度条
QT——QSlider实现，QT滑动控件的使用
NS_ice的博客
05-29 1755
QT——QSlider实现，QT滑动控件的使用，QAbstractSlider类的使用。调节滑块到指定位置后，发生一个触发事件，在这个触发事件中，我们获取最后的值，然后进行处理操作。 滑动滑动条使值发生变化，只要最后停下的时候触发信号量执行槽函数。获取滑动块最后停下的值并执行槽函数。滑动块槽函数互动一下多次触发怎么办。sliderMoved，sliderPressed，sliderReleased，valueChanged，actionTriggered，rangeChanged使用
QT控件样式系列（一）之QSlider
流云落尘
07-30 8320
系列文章目录 最近做QT开发，项目做的很急，很多东西都是直接百度之后直接拿来用，根本没认真看，现在有空了来整理一波，主要记录控件常用样式，方便后续查阅 文章目录系列文章目录前言一、通用QT样式1.QSS文本属性2.QSS背景属性3.QSS边框属性4.QSS Box 属性5.QSS 字体属性6.QSS 外边框属性7.QSS 内边框属性8.QSS 位置属性二、QSlider样式组成1、主体2、滑动槽的部分3、滑过与未滑过的部分4、滑块5、最终效果三、QSlider使用总结 前言 该篇记录QSlider常
Qt控件——滑动条QSlider
weixin_63780683的博客
11-05 2614
【代码】Qt控件——滑动条QSlider。
【QSlider样式表的详细设置及含义】
热门推荐
pengrunxin的博客
11-20 1万+
QSlider的样式表的各项设置含义qslider的构成（三部分）qslider每部分构造要素新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 qslider的构成（三部分） 首先，我们要明白qslider的构成有哪些：通常
[qss]qslider
分享嵌入式,移动端,智能应用,数据库等专业板块,记录知识碎片！！！
11-24 256
QSlider::groove:horizontal { border: 0px solid #bbb; } QSlider::sub-page:horizontal { background: rgb(235,97,0); border-radius: 0px; margin-top:8px; margin-bottom:8px; } QSlider::add-page:horizontal { background: rgb(255,255, 255); b.
Qt QSlider详解
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
02-18 1万+
1.QSlider基础设置 //设置最大值、最小值、范围 setMaximum(int) setMinimum(int) setRange(int min, int max) //设置单步长，拖动标尺上的滑块，或按下左右光标键时的最小变化数值。 setSingleStep(int) //在滑块上输入焦点时，按PgUp 或 PgDown时变化的数值 setPageStep(int) //设置当前值 setValue(int) //设置方向，水平或者垂直 setOrientation(Qt::O.
【Qt】自定义QSlider
09-13
在Qt库中，QSlider是一个常用的控件，用于显示和设置介于两个整数之间的值。这个控件允许用户通过拖动滑块或点击来调整数值。本文将深入探讨如何自定义QSlider，以实现点击和拖动设置数值的功能。 首先，我们需要...
Qt例程源代码QSlider.7z
07-19
在Qt中，信号和槽机制是核心特性之一。QSlider定义了多个信号，如`valueChanged(int)`、`sliderMoved(int)`和`sliderReleased()`，当相应的事件发生时，这些信号会被发射。开发者可以将这些信号连接到相应的槽函数，...
基于Qt开发的圆形滑动条
11-20
基于Qt开发的圆形滑动条，环形动态显示进度。下载包内包含cpp和h文件，下载后添加到项目中即可使用。代码借鉴于http://blog.csdn.net/taiyang1987912/article/details/50524359，在此向作者致敬。上传资源备用，资源...
Windouws平台QT 滑动时间选择
01-08
总的来说，实现Windows平台QT5的滑动时间选择功能，需要深入理解QT5的API，尤其是QDateTime、QSlider和QDateTimeEdit的使用，以及如何利用信号和槽机制实现组件间的交互。同时，关注触屏操作的优化和跨平台兼容性，...
Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动
最新发布
05-30
首先，Qt中的QSlider控件虽然名字中含有“Slide”，但它实际上是一个水平或垂直的滑块，通常用于数值选择，而非我们这里所说的侧边栏滑动。真正的侧边栏滑动效果通常是通过自定义控件或者组合已有的控件来完成的。 ...
Qt实现一个同QSlider一样可以控制任务进度的圆形滑块
03-12
本篇文章将详细介绍如何在Qt中实现一个与QSlider功能类似的圆形滑块。 首先，我们需要创建一个新的QGraphicsView派生类，这个类将承载我们的圆形滑块。QGraphicsView是Qt图形视图框架的一部分，它允许我们创建复杂...
QT qss 自定义QSlider滑动条，QSlider滑块圆形，圆形滑块边框阴影
尹章小又的博客
09-20 6239
最近研究最新版的360安全卫士，并仿照去实现，其中在换肤模块中有一个调节透明度的滑动条，包括滑块是圆形的，已经滑动的区域是绿色的，未滑动的区域是灰白色，使用纯qss实现，阴影实现 1、代码如下： // 滑动条 m_pSlider = new QSlider(this); m_pSlider->setOrientation(Qt::Horizontal); m_p...
【QT入门】 Qt自定义控件与样式设计之QSlider用法及qss
LF__plus的博客
04-11 1137
【QT入门】 Qt自定义控件与样式设计之QSlider用法及qss
【QT开发笔记-基础篇】| 第二章 常用控件 | 2.9 滑动条 QSlider
B站-大轮明王讲Qt
08-16 4261
(1) QSlider 常用属性：值、方向、步长 (2) QSlider 实际案例
QT 自定义QSlider滑动条，QSlider滑块圆形
09-26
### 回答1： 可以通过继承QSlider类并重写paintEvent()函数来自定义QSlider滑动条，同时可以通过设置QStyleOptionSlider中的subControls属性来设置滑块的形状为圆形。具体实现可以参考以下代码： ``` class CustomSlider : public QSlider { public: CustomSlider(QWidget *parent = nullptr) : QSlider(parent) { setStyleSheet("QSlider::groove:horizontal { height: 10px; background: #ddd; }" "QSlider::handle:horizontal { width: 20px; border-radius: 10px; background: #333; }"); } protected: void paintEvent(QPaintEvent *event) override { QSlider::paintEvent(event); QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); QStyleOptionSlider opt; initStyleOption(&opt); QRect grooveRect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderGroove, this); QRect handleRect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this); QPoint center = handleRect.center(); painter.setPen(Qt::NoPen); painter.setBrush(QColor("#333")); painter.drawEllipse(center, handleRect.width() / 2, handleRect.height() / 2); } }; ``` 在上述代码中，我们通过设置QSlider的样式表来设置滑动条的样式，其中groove表示滑动条的轨道，handle表示滑块。在paintEvent()函数中，我们首先调用QSlider的paintEvent()函数来绘制默认的滑动条，然后获取滑动条的轨道和滑块的矩形区域，并计算出滑块的中心点。最后，我们使用QPainter绘制一个圆形，将其填充为黑色，并以滑块的中心点为圆心，滑块宽度的一半为半径进行绘制，从而实现了圆形滑块的效果。 ### 回答2： QT是一款跨平台的C++图形用户界面应用程序开发框架。在QT中，我们可以自定义QSlider滑动条以及滑块的形状。 要自定义QSlider滑动条，首先我们需要创建一个自定义的滑动条类，继承QSlider。在该类中，我们可以重写一些QSlider的虚函数，如paintEvent()、sliderChange()等，以实现自定义的滑动条样式和功能。 要实现圆形的滑块，我们可以通过设置滑块样式表来实现。在QSlider的子类中，通过重写paintEvent()函数，我们可以在滑动条上绘制自定义的滑块。 以下是一个自定义的QSlider滑动条，滑块为圆形的示例代码： ```cpp class CustomSlider : public QSlider { Q_OBJECT public: CustomSlider(QWidget *parent = nullptr) : QSlider(parent) { setStyleSheet("QSlider::handle {" " background: green;" " border-radius: 8px;" " width: 16px;" " height: 16px;" "}"); } protected: void paintEvent(QPaintEvent *event) override { QSlider::paintEvent(event); QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); QRect grooveRect = style()->subControlRect(QStyle::CC_Slider, this, QStyle::SC_SliderGroove, this); int x = grooveRect.x() + grooveRect.height() / 2 - 8; int y = grooveRect.y() + grooveRect.height() / 2 - 8; painter.setBrush(QColor(51, 153, 255)); painter.setPen(Qt::NoPen); painter.drawEllipse(QRect(x, y, 16, 16)); } }; ``` 在上述代码中，我们重写了CustomSlider的构造函数和paintEvent()函数。构造函数中通过设置样式表，将滑块的背景设为绿色，圆角半径设为8px，并设置滑块的大小为16x16px。paintEvent()函数中，我们通过获取滑动条的轨道区域，计算滑块的位置，然后绘制一个蓝色圆形作为滑块。 我们可以在应用程序中使用CustomSlider类来替代QSlider类，从而实现自定义的滑动条和圆形滑块。 ### 回答3： 要自定义QSlider滑动条，使滑块圆形，可以通过重写QStyle类的drawComplexControl方法来实现。具体步骤如下： 1. 创建一个继承自QStyle的自定义样式类，并重写drawComplexControl方法。 2. 在drawComplexControl方法中，首先调用父类的drawComplexControl方法，这样可以绘制默认样式的滑块。 3. 获取滑块的矩形区域，并将其设置为圆形。 4. 根据滑块的圆形矩形区域，绘制一个圆形。 5. 最后，将自定义样式类应用到QSlider控件上。 下面是实现上述步骤的示例代码： ```C++ #include <QtWidgets> class CustomSliderStyle : public QStyle { public: using QStyle::QStyle; void drawComplexControl(ComplexControl control, const QStyleOptionComplex* option, QPainter* painter, const QWidget* widget = nullptr) const override { if (control == CC_Slider && option->subControls == SC_SliderHandle) { QStyleOptionSlider opt = *qstyleoption_cast<const QStyleOptionSlider*>(option); // 绘制默认样式的滑块 QStyle::drawComplexControl(control, option, painter, widget); // 获取滑块的矩形区域 QRect grooveRect = subControlRect(CC_Slider, option, SC_SliderHandle, widget); QRect handleRect = opt.rect; // 将滑块的矩形区域设置为圆形 handleRect.setSize(QSize(handleRect.width(), handleRect.width())); handleRect.moveCenter(grooveRect.center()); // 绘制圆形滑块 painter->save(); painter->setRenderHint(QPainter::Antialiasing, true); painter->setPen(Qt::NoPen); painter->setBrush(opt.palette.buttonText()); painter->drawEllipse(handleRect); painter->restore(); } else { QStyle::drawComplexControl(control, option, painter, widget); } } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); QSlider slider; CustomSliderStyle customStyle; slider.setStyle(&customStyle); slider.show(); return app.exec(); } ``` 通过以上代码，可以自定义QSlider滑动条，使滑块变为圆形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值