QSlider 的样式设置

标签: qt style sheet
10984人阅读 评论(6) 收藏 举报
分类:


设计漂亮的style sheet,注意背景色..否则每个角上会有一个像素的小点..

QSlider::groove:horizontal {
border: 1px solid #4A708B;
background: #C0C0C0;
height: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
}

QSlider::sub-page:horizontal {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
    stop:0 #B1B1B1, stop:1 #c4c4c4);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
    stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 1px solid #4A708B;
height: 10px;
border-radius: 2px;
}

QSlider::add-page:horizontal {
background: #575757;
border: 0px solid #777;
height: 10px;
border-radius: 2px;
}

QSlider::handle:horizontal 
{
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, 
    stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));

    width: 11px;
    margin-top: -3px;
    margin-bottom: -3px;
    border-radius: 5px;
}

QSlider::handle:horizontal:hover {
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA, 
    stop:0.778409 rgba(255, 255, 255, 255));

    width: 11px;
    margin-top: -3px;
    margin-bottom: -3px;
    border-radius: 5px;
}

QSlider::sub-page:horizontal:disabled {
background: #00009C;
border-color: #999;
}

QSlider::add-page:horizontal:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:horizontal:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

以下是竖版的样式:


QSlider::groove:vertical {
border: 1px solid #4A708B;
background: #C0C0C0;
width: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
padding-top:-1px;
padding-bottom:-1px;
}

QSlider::sub-page:vertical {
background: #575757;
border: 1px solid #4A708B;
border-radius: 2px;
}

QSlider::add-page:vertical {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
    stop:0 #c4c4c4, stop:1 #B1B1B1);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
    stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 0px solid #777;
width: 10px;
border-radius: 2px;
}

QSlider::handle:vertical 
{
	background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #45ADED, 
	stop:0.778409 rgba(255, 255, 255, 255));

    height: 11px;
    margin-left: -3px;
    margin-right: -3px;
    border-radius: 5px;
}

QSlider::sub-page:vertical:disabled {
background: #00009C;
border-color: #999;
}

QSlider::add-page:vertical:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:vertical:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}


查看评论

Qt中QSlider的样式表设置

在没有设置的时候,总感觉很难的样子,其实,真正做起来也不是那么难,就把刚刚自己做的发出来共享吧。 先来看一看水平的: 先上效果图: //首先是设置主体 QSlider{ border-color: ...
  • tax10240809163com
  • tax10240809163com
  • 2016-03-15 19:02:48
  • 5209

两种QSlider进度条的QSS样式

1. 横的进度条: musicSlider->setStyleSheet(" \ QSlider::add-page:Horizontal\ { \ ...
  • liukang325
  • liukang325
  • 2015-04-03 09:25:38
  • 8481

【Qt】QSlider----qss(round handle) 圆形滑块

QSlider是Qt中常用的控件,样式也各种各样,自己尝试做的一个样式,尽管handle能用图片做的更完美,不用图片,视觉效果上,仍然没什么问题,round handle QSlider { ...
  • Qyee16
  • Qyee16
  • 2014-02-22 13:47:28
  • 6467

QSS定制自定义QSlider

QSlider中有四个比较重要的辅助控制器(subcontrol),groove表示槽的部分,handle表示滑块,add-page表示未滑过的槽部分,sub-page表示已滑过的槽部分。在辅助控制器...
  • sdljlcming
  • sdljlcming
  • 2012-12-17 10:57:13
  • 3010

QT学习1 QSlider 更改样式

Seriously. I don’t know how I ever created a Qt user interface without using stylesheets. This was, ...
  • yuan_lo
  • yuan_lo
  • 2016-07-07 17:31:27
  • 857

一个漂亮的滑动条样式

前段时间做一个东西,要用到滑动条,在更改样式时破费脑筋!因为总有一些问题:例如,当你滑动滑块到两端时,下面的滑槽总是遮不住,还有一个就是你要滑到两端时,你设置的弧度圆角突然变成方的,细细很不美观。 ...
  • u013782830
  • u013782830
  • 2016-06-21 10:04:32
  • 937

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

QSlider::groove:horizontal,QSlider::add-page:horizontal{ height:3px; border-radius:3px; background:#...
  • Qyee16
  • Qyee16
  • 2016-06-13 21:12:28
  • 2347

QSlider QSS设置样式

volumeSlider->setStyleSheet("QSlider{background-image: url(:images/volumeslider.png);}" ...
  • u011417605
  • u011417605
  • 2015-11-18 16:06:20
  • 1042

QSlider样式设计

The slider is the classic widget for controlling a bounded value. It lets the user move a slider han...
  • Zzhouzhou237
  • Zzhouzhou237
  • 2017-05-27 09:37:52
  • 255

Qt之QSlider

简述QSlider部件提供了一个垂直或水平滑动条。滑块是一个用于控制有界值的典型部件。它允许用户沿水平或垂直方向移动滑块,并将滑块所在的位置转换成一个合法范围内的值。简述 详细描述 刻度位置 基本使用...
  • u011012932
  • u011012932
  • 2016-08-24 14:59:27
  • 12226
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 74万+
    积分: 9218
    排名: 2870
    博客专栏
    文章分类
    最新评论