0
点赞
收藏
分享

微信扫一扫

通过qss实现Qt按钮的默认效果——qconicalgradient


  这里提供一种使用qconicalgradient()实现QPushButton的默认显示效果的方法,由名字可以知道,qconicalgradient()提供的是一种扇形渐变效果,或称为圆锥式渐变效果。

直接上代码 >>

按钮正常状态时的样式

QPushButton {
border:1px solid rgb(124, 124, 124);
background-color:qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(214, 214, 214, 255), stop:0.50001 rgba(236, 236, 236, 255));
border-radius:5px;
}

效果如下:

通过qss实现Qt按钮的默认效果——qconicalgradient_conical

按钮被鼠标滑过时的样式

QPushButton:hover{
border:1px solid #3C80B1;
background-color:qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(181, 225, 250, 255), stop:0.50001 rgba(222, 242, 251, 255));
border-radius:5px;
}

效果如下:

通过qss实现Qt按钮的默认效果——qconicalgradient_qss_02

按钮被按下时的样式

QPushButton:pressed{
border:1px solid #5F92B2;
background-color:qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(134, 198, 233, 255), stop:0.50001 rgba(206, 234, 248, 255));
border-radius:5px;
}

效果如下:

通过qss实现Qt按钮的默认效果——qconicalgradient_按钮默认效果_03

qconicalgradient()参数详解

  先来思考如果我们自己实现扇形渐变的话,或者说从数学角度分析,需要些什么元素才能准确描述它。
  没错!我们需要确定扇形的圆心(中心点)、扇形的半径、扇形的起始角度、扇形的跨度,以及扇形所填充颜色的渐变方向。不过这里我们不需要给定半径大小,因为按钮的大小和形状是未知的,所以我们可以认为qconicalgradient()已经将扇形半径设定为无限大了。
  
下面解释一下qconicalgradient()中的各个参数到底是什么意思。

  • cx和cy的值是中心点的逻辑坐标,所谓逻辑坐标就是将它所描述的对象(箱体模型)的左上顶点设为(0.0, 0.0),右下顶点设为(1.0,
    1.0)。所以这里的(cx:0.5, cy:0.5)就是指定扇形的圆心在按钮的中心点上。
  • angle的值代表扇形的起始角度(单位:度),和数学上定义的一样,默认扇形的起始角度为0,即指向x轴的正方向,角度为正是逆时针方向,角度为负是顺时针方向。
    如图所示,蓝点为中心点,黑线为angle等于0时的起始线,红线为angle等于180时的起始线。
  • 通过qss实现Qt按钮的默认效果——qconicalgradient_qss_04

  • stop可以控制扇形的跨度和颜色,确切来说它控制的是扇形从哪里、以什么颜色开始渐变。stop的第一个值表示渐变开始的位置(以angle指定的的角度为0,逆时针转360度后为1),第二个值表示此处的颜色值。所以上面的例子其实0.49999和0.50001之间是有渐变效果的,只不过实在看不出来而已(或者说显示屏无法表达这种渐变)。
    值得注意的是,第一个stop前的那部分(即上述例子的0.49999)会显示为第一个stop指定的颜色,而最后一个stop后的那部分(即上述例子的0.50001)会显示为最后一个stop指定的颜色,相信如果用过photoshop等图像处理软件的会很容易理解这一点。
      


举报

相关推荐

0 条评论