87.通过qss实现扑克牌上下左右移动

当前我们有这样一张图片

我们搞一个标签来展示图片，然后搞上下左右四个按钮，对图片进行移动，以达到扑克牌的切换

首先我们创建label,使他背景为第一张扑克

简单摆一下位置

先实现功能，最后我们再用布局管理器去摆

设置上下按钮的变量

槽函数对qss进行操作

def down(self):
    self.v_count = (self.v_count + 1) % 5
    self.label.setStyleSheet('background-image:url(resource/card.png);background-origin:content;padding-top:'+str(self.v_count*-70)+'px;padding-left:'+str(self.h_count*-52)+'px;')

def up(self):
    self.v_count = (self.v_count - 1) % 5
    self.label.setStyleSheet('background-image:url(resource/card.png);background-origin:content;padding-top:'+str(self.v_count*-70)+'px;padding-left:'+str(self.h_count*-52)+'px;')

def right(self):
    self.h_count = (self.h_count + 1) % 13
    self.label.setStyleSheet('background-image:url(resource/card.png);background-origin:content;padding-top:'+str(self.v_count*-70)+'px;padding-left:'+str(self.h_count*-52)+'px;')

def left(self):
    self.h_count = (self.h_count - 1) % 13
    self.label.setStyleSheet('background-image:url(resource/card.png);background-origin:content;padding-top:'+str(self.v_count*-70)+'px;padding-left:'+str(self.h_count*-52)+'px;')

• qss中也是可以用字符串进行拼接的

当有选择器的时候样式表是可以叠加的，也就是说，咱们这样写槽函数也行

经测试一样可以完成功能

最后的槽函数我们也可以这样写

如果再槽函数中也加入了选择器，那咱们也可以这样写

我们现在回过头来搞样式

首先锁死label的大小

之后正常摆放

当然也可以有别的样式，这个就咱们自己设置吧