【Qt】QSlider 再来一个圆形滑块

最新推荐文章于 2024-04-26 16:34:34 发布
最新推荐文章于 2024-04-26 16:34:34 发布
阅读量5.8k 收藏 13
点赞数
文章标签： qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qyee16/article/details/51660665
版权 
QSlider::groove:horizontal,QSlider::add-page:horizontal{
height:3px;
border-radius:3px;
background:#18181a;
}


QSlider::sub-page:horizontal{
height:8px;
border-radius:3px;
background:#008aff;
}


QSlider::handle:horizontal{
width:12px;
margin-top:-5px;
margin-bottom:-4px;
border-radius:6px;
background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 #565656,stop:0.8 #565656);
bacder-image:url(./res/images/live/GOUGOU.png)
}


QSlider::groove:vertical,QSlider::sub-page:vertical{
width:8px;
border-radius:3px;
background:#D8D8D8;
}


QSlider::add-page:vertical{
width:8px;
border-radius:3px;
background:#008aff;
}


QSlider::handle:vertical{
height:12px;
margin-left:-5px;
margin-right:-4px;
border-radius:6px;
background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 #565656,stop:0.8 #565656);
bacder-image:url(./res/images/live/GOUGOU.png)
}

效果如图：
这里写图片描述

Qyee16
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
基于Qt开发的圆形滑动条
11-20
基于Qt开发的圆形滑动条，环形动态显示进度。下载包内包含cpp和h文件，下载后添加到项目中即可使用。代码借鉴于http://blog.csdn.net/taiyang1987912/article/details/50524359，在此向作者致敬。上传资源备用，资源分收取只是意思一下。
Qt之QDoubleSlider 继承QSlider的双向滑块
01-13
Qt自带的QSlider滑块控件只能是单向的控制阈值，某些情况下要使得可以左右上限可调控的话只能是使用两个或者多个QSlider，但是也有很多是朋友是通过继承QWidget自写了一个可调控的双向滑块，虽然能满足需求，但是样式、性能等方面也许有所不足，这里我推荐一个Qt的第三方控件库Qt Extension Library，其中包含了一个对QSlider的重写类QxtSpanSlider，这个类满足了需求。但是如果给继承了这个类的控件设置了样式后那就有问题了，所以我在QxtSpanSlider基础上稍作了些修改使得其看上去更加美观。
QSlider 介绍与使用
CHNIM的博客
03-01 1260
当使用 Qt 编写程序时，QSlider 是一个常用的控件，用于实现滑块功能。
QT实现在滑动条的滑块上显示数值
07-18
滑块可以随意拉动，并在滑块上实时显示当前数值，可以随意拖动，简单高效无bug。 同时可以实现点击滑条便使得滑块可以实时跳到点击的位置
Qt学习笔记19：QSlider
WHEgqing的专栏
10-18 907
QSlider部件提供了一个垂直或水平滑动条。滑块是一个用于控制有界值的典型部件。它允许用户沿水平或垂直方向移动滑块，并将滑块所在的位置转换成一个合法范围内的值。
QSlider 样式 Qt15.15.2 圆形滑块
qq_30126571的博客
07-28 969
在设置的时候边框总是和预期的有点误差，后来发现了这样一个计算方式可以画一个比较标准的圆。（ABCDEF在下方代码块内）按照这个写出的滑块就是一个圆形，不然就会有点椭圆。不知道是不是我的这个qt版本的问题，欢迎留言。在看文档的时候测试了一下demo，然后发现了一个有意思的东西，自定义滑块为带边框的圆形。滑块的高=A+C+D = 2*E。滑块的宽=B+2*F =2*E。
QT qss 自定义QSlider滑动条，QSlider滑块圆形，圆形滑块边框阴影
尹章小又的博客
09-20 6100
最近研究最新版的360安全卫士，并仿照去实现，其中在换肤模块中有一个调节透明度的滑动条，包括滑块是圆形的，已经滑动的区域是绿色的，未滑动的区域是灰白色，使用纯qss实现，阴影实现 1、代码如下： // 滑动条 m_pSlider = new QSlider(this); m_pSlider->setOrientation(Qt::Horizontal); m_p...
Qt中用StyleSheet做圆形QSlider的方法解释（应该也适用于CSS等）
qq_38566306的博客
12-09 1606
扩展阅读： （1）以下链接有很丰富的实例，参考价值高： https://blog.csdn.net/wzs250969969/article/details/78458151 （2）详细解释参考（SVG）： https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/radialGradient                   ...
Qt编写的圆形Slider滑动条
qq_44896246的博客
03-08 614
Qt实现一个同QSlider一样可以控制任务进度的圆形滑块；
【Qt】QSlider----qss（round handle) 圆形滑块
热门推荐
02-22 1万+
QSlider是Qt中常用的控件，样式也各种各样，自己尝试做的一个样式，尽管handle能用图片做的更完美，不用图片，视觉效果上，仍然没什么问题，round handle QSlider { background-color: #ff00ff; border-style: outset; border-radius: 10px; } QSlider::groove:horiz
Qt实现一个同QSlider一样可以控制任务进度的圆形滑块
03-12
Qt实现一个同QSlider一样可以控制任务进度的圆形滑块
QT 自绘Slider双滑块(包含单个滑块)并修改样式
06-13
1.包含双滑块，单滑块 2.可修改自己需要的样式 3.基本包含QSlider的基本功能 4.资源中包含滑块的使用案例
QSlider滑块点击时在滑块上显示当前值
05-27
由于项目需要，需要Qt中QSlider滑块点击时在滑块上显示当前值。但是在网上找了好多资料都没有发现具体的实现。后经自己研究实现了。本着开源的精神，贡献出来源代码，也希望有更好思路的朋友给予指点。
【Qt踩坑】Qt项目嵌入Web踩坑记录--加载QtWebEngine模块的程序会出现崩溃
Monster_H7的博客
04-23 154
是一个环境变量设置，用于禁用 Qt WebEngine 的沙箱功能。Qt WebEngine 是 Qt 框架中用于处理 web 内容的模块，沙箱功能可以增强安全性，防止恶意代码对系统造成影响。但在某些情况下，可能由于特定需求或系统配置，需要禁用沙箱功能。设置这个环境变量为1就是告诉 Qt WebEngine 不要使用沙箱功能。
在Qt creator中使用多光标
m0_61629312的博客
04-22 313
键，并用鼠标左键在文本编辑器中选择多个光标位置。你可以选择多个不同的位置，或者选择整个文件中的所有匹配项。然后，你可以在这些光标位置上同时进行编辑，输入相同或不同的文本，或者进行其他编辑操作。多光标模式允许你在同一时间在多个光标位置进行编辑，从而可以更快地进行一些重复性的编辑操作。Qt Creator 支持多光标模式。2024年4月22日，周一下午。要启用多光标模式，请按住。
Qt | 鼠标事件第四节
m0_45463480的博客
04-22 241
九、鼠标事件 1、Qt 使用 QMouseEvent 类来描述与鼠标有关的信息，比如鼠标的位置坐标，键是否被按下等，使用枚举类型 QEvent::Type描述与鼠标有关的事件，比如 QEvent::MouseButtonPress表示鼠标按下事件，QEvent::MouseMove表示鼠标移动事件等。 2、是否接收鼠标事件，最好明确的调用QEvent::ignore()和 QEvent::accept()函数。
【Qt】error LNK2001: 无法解析的外部符号
最新发布
paxlhhh
04-26 67
error LNK2001: 无法解析的外部符号 "__declspec(dllimport)以这种为前缀的基本上跟库相关的，说明无法正常调用库，一般是路径有问题。查看该文件所在的pro文件里，发现只添加了。
Qt:学习笔记一
weixin_45930573的博客
04-25 967
/槽函数，可以写到public slots，也可以写到public全局下//返回值void，需要声明，也需要实现//可以有参数，可以发生重载signals://自定义信号，写到signals下//返回值是void，只需要声明，不需要实现//可以有参数，可以重载qDebug() << "请老师吃饭";//QString->char * 先转成QByteArray (.toUtf8() ) 再转char * ()
Qt环境搭建
m0_64028711的博客
04-22 449
本文讲述了 QT 工具的下载安装以及环境变量的配置，并且了解了项目的创建以及项目代码的细节。
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滑动条，使滑块变为圆形。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值