两种QSlider进度条的QSS样式

1. 横的进度条:

musicSlider->setStyleSheet("       QSlider::add-page:Horizontal     {             background-color: rgb(87, 97, 106);        height:4px;     }     QSlider::sub-page:Horizontal     {        background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(231,80,229, 255), stop:1 rgba(7,208,255, 255));        height:4px;     }    QSlider::groove:Horizontal     {        background:transparent;        height:6px;    }    QSlider::handle:Horizontal     {        height: 30px;        width:8px;        border-image: url(:/images/ic_music_thumb.png);        margin: -8 0px;     }    ");

由于采用样式,原始的拖动滑块消失,采用ic_music_thumb.png来当拖动滑块。

   <- -    ic_music_thumb.png

2. 竖的进度条,有底色。圆形滑块。

volumeSlider->setStyleSheet("      QSlider    {        background-color: rgb(25, 38, 58);        min-width:5px;        max-width:5px;        border:15px solid rgb(25, 38, 58);    }     QSlider::add-page:vertical     {             background-color: rgb(37, 168, 198);        width:4px;     }     QSlider::sub-page:vertical     {        background-color: rgb(87, 97, 106);        width:4px;     }    QSlider::groove:vertical     {        background:transparent;        width:6px;    }    QSlider::handle:vertical     {         height: 13px;        width:13px;        border-image: url(:/images/ic_volume_thumb.png);         margin: -0 -4px;      }    ");

 <--    ic_volume_thumb.png

时间: 2024-10-12 03:30:51

两种QSlider进度条的QSS样式的相关文章

自定义进度条\文字描边样式\文字上下滚动TextSwithcher的应用

一.自定义进度条 1.<ProgressBar         android:id="@+id/patch_progress"         style="@style/gxProgressStyle"         android:layout_width="match_parent"         android:layout_height="12dp"         android:layout_alig

渐变色进度条的两种绘制方案

在App开发中经常会用到渐变色进度条控件,而自定义进度条的实现也不难,下面提供了两种渐变色进度条的实现方案. 效果图如下: 第一种实现方案:使用图层layer实现 层级结构如图所示: 构建过程如下: 1.创建容器 容器创建方案上采用的是生成UIView的子视图:LabelProgressBar, 把LabelProgressBar当作一个类似容器的控件而面向客户端. 好处是:可以方便的使用LabelProgressBar在Xib,StoryBoard,代码中. 而如果用其他的方式,却做不到这样使

进度条的使用

Qt 提供了两种显示进度条的方式,一种是 QProgressBar,另一种是 QProgressDialog,QProgressBar 类提供了种横向或纵向显示进度条的控件表示方式,用来描述任务的完成情况. QProgressDialog 类提供了一种针对慢速过程的进度对话框表示方式, 用于描述任务完成的进度情况.标准的进度条对话框包括一个进度显示条,一个取消按钮以及一个标签. QProgressBar 有几个重要的属性值,minimum,maximum 决定进度条提示的最小值和最大值,form

Bootstarp学习(十七)进度条

进度条 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等.就如下图所示的一个评分系统,他就是一个简单的进度条效果: 进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本: ? LESS版本:源码文件progress-bars.less ? Sass版本:源码文件_progress-bars.scss ? 编译后版本:bootstrap.css文件第4500行-第4575行 而且Bootstrap框架为大家提供多种样式风格的进度条,供大家使用(见右侧代码编辑器),这一

Bootstrap 警告、进度条、列表组

摘要:该部分包括警告.进度条等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success..alert-info..alert-danger..alert-warning.代码示例: 1 <div class="alert alert-success">成功</div> 2 <div class="alert alert-info">

深入理解BootStrap Item14 -- 进度条(progressbar)

1.进度条 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等.就如下图所示的一个评分系统,他就是一个简单的进度条效果: 进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本: ? LESS版本:源码文件progress-bars.less ? Sass版本:源码文件_progress-bars.scss ? 编译后版本:bootstrap.css文件第4500行-第4575行 而且Bootstrap框架为大家提供多种样式风格的进度条,供大家使用. 2.进度条–基本样

Bootstrap中的进度条

进度条 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等.就如下图所示的一个评分系统,他就是一个简单的进度条效果: 进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本: ? LESS版本:源码文件progress-bars.less ? Sass版本:源码文件_progress-bars.scss ? 编译后版本:bootstrap.css文件第4500行-第4575行 而且Bootstrap框架为大家提供多种样式风格的进度条,供大家使用,这一小节只是给大家直观上

Android零基础入门第51节:进度条ProgressBar

不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有APP的开发,还会经常用到一些诸如进度条.拖动条.搜索框.时间和日期选择器等组件,那么后面几期就来一起学习这些高级组件. 一.ProgressBar系列组件 ProgressBar也是一组重要的组件,ProgressBar本身代表了进度条组件,它还派生了两个常用的组件:SeekBar和RatingBar.ProgressBar及其子类在用法上十分相似,只是显示界面有一定的

Android自定义文本的进度条

工作中要求实现如下图中进度条(进度条上面是带比例数的文本,进度条颜色与比例数对应),写下自己的实现过程. 整体思路:Android中ProgressBar控件不支持自定义文本,所以需要写自定义progressBar. 1.progressBar上要自定义文本,需要重写onDraw()方法: 2.为实现进度是红色,底色是灰色效果,需要自定义progressBar样式 代码实现: 1.自定义的ProgressBar实现代码: 1 package com.example.myprogressbar;