qslider qss使用

说明:
QSlider中有四个比较重要的辅助控制器(subcontrol)
groove表示槽的部分
handle表示滑块
add-page表示未滑过的槽部分
sub-page表示已滑过的槽部分
在辅助控制器后面可以设置状态,horizontal就是QSS生效的QSlider的状态,注意这里设置的方向一定要和slider对象的方向一致,如果slider是vertical的,QSS设定的是horizontal的,那么是看不到效果的。

先在qss文件定义

/*横向滑动条的两种样式*/
QSlider[STYLE_KEY="WHITE_SLIDER"]:horizontal 
{  /*这里写成这个样子是为了让圆心与左边的边对齐,其中 6px是半径,
	下面与之相关的还有QSlider[STYLE_KEY="WHITE_SLIDER"]::groove:horizontal 的
	padding-left: -6px;
	padding-right: -6px;
	*/
	border-left: 6px;
	border-right: 6px;
	border-style: solid;
	border-color: rgba(0,0,0,0);
} 
QSlider[STYLE_KEY="WHITE_SLIDER"]::groove:horizontal 
{  
	border: 0px solid #bbb;  
	height: 4px;  
	padding-left: -6px;
	padding-right: -6px;
} 
QSlider[STYLE_KEY="WHITE_SLIDER"]::sub-page:horizontal 
{  
	background: #FFFFFF;  
	border: 0px solid #777;  
}
QSlider[STYLE_KEY="WHITE_SLIDER"]::add-page:horizontal 
{  
	background: #85a8bf;  
	border: 0px solid #777;  
} 
QSlider[STYLE_KEY="WHITE_SLIDER"]::handle:horizontal 
{  
	/* border-radius =宽度/2 */
	/*球形滑块  需要定义外边距:value = (滑块高度-槽高度)/2*(-1)      */
	background: #0d669b;  
	border: 0px solid #777;  
	width: 12px;
	height: 12px;
	margin-top: -4px;  
	margin-bottom: -4px;
	border-radius: 6px;  
}  
QSlider[STYLE_KEY="WHITE_SLIDER"]::handle:horizontal:hover
{  
	background: #005a90;
}
第二步
qapp.setstylesheet(qss);

第三步
qslider->setProperty("STYLE_KEY","WHITE_SLIDER");
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 QSS 样式来设置 QSlider 的样式时,可以使用以下属性来调整 QSlider 的外观: - `background-color`:设置 QSlider 的背景颜色。 - `border`:设置 QSlider 的边框样式,可以包括边框宽度、边框样式和边框颜色。 - `padding`:设置 QSlider 内容区域的内边距,即内容与边框之间的距离。 - `margin`:设置 QSlider 的外边距,即 QSlider 与其它元素之间的距离。 下面是一些常用的 QSlider QSS 样式示例: ```qss /* 设置整个 QSlider 的样式 */ QSlider { background-color: #E0E0E0; /* 设置背景颜色 */ border: 1px solid #8F8F91; /* 设置边框样式 */ padding: 1px; /* 设置内边距 */ } /* 设置 QSlider 的滑块样式 */ QSlider::handle { background: #FFFFFF; /* 设置滑块的背景颜色 */ border: 1px solid #8F8F91; /* 设置滑块的边框样式 */ width: 20px; /* 设置滑块的宽度 */ margin: -1px 0px; /* 设置滑块的位置 */ } /* 设置 QSlider 的槽样式 */ QSlider::groove { background: #D3D3D3; /* 设置槽的背景颜色 */ height: 6px; /* 设置槽的高度 */ } /* 设置 QSlider 的刻度线样式 */ QSlider::add-page:horizontal { background: #FFFFFF; /* 设置刻度线的背景颜色 */ height: 6px; /* 设置刻度线的高度 */ } /* 设置 QSlider 的选中部分样式 */ QSlider::sub-page:horizontal { background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #B1B1B1, stop: 1 #c4c4c4); /* 设置选中部分的背景颜色 */ height: 6px; /* 设置选中部分的高度 */ } ``` 在上面的样式中,`QSlider` 表示整个 QSlider 控件,`QSlider::groove` 表示滑动条的槽,`QSlider::add-page` 表示滑动条的刻度线,`QSlider::sub-page` 表示滑动条的选中部分,`QSlider::handle` 表示滑块。可以根据需要自行修改这些样式。 在样式中,可以使用一些特殊的变量来引用 QSlider 的一些属性,例如 `palette`、`background-color` 等。例如,可以使用以下样式来设置 QSlider 的背景颜色和滑块的背景颜色为相同的颜色: ```qss QSlider { background-color: palette(base); } QSlider::handle { background-color: palette(base); } ``` 这样可以使整个滑动条看起来更加统一。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值