Content Table

异形按钮组

不少软件里看到过如下的按钮组,有 5 个按钮,中间 1 个,上下左右各一个:

可以通过绘图的方式实现:计算每一个按钮的位置、大小、图片、点击的时候判断点击到了哪个按钮然后刷新绘制它的样式,并调用相应的函数执行点击操作,难度还是相当大的。

还有更简单的方法:使用 QGridLayout + QPushButton + QSS 实现,先用 QGridLayout 把 5 个按钮布局如下 (对大家来说没有什么难度,就不浪费时间进行介绍了):

然后使用 QSS 的 border-image 给按钮在不同状态时贴上不同的背景图片即可:

  1. 为了方便的找到每个按钮,分别给他们命名为 topButton, rightButton, bottomButton, leftButton, centerButton,一看名字就知道指的是哪一个按钮,这里就不再一一赘述
  2. 用 QSS,先设置所有按钮的公共样式
  3. 再根据按钮的名字 (objectName) 使用 border-image 设置按钮各自在不同状态下的背景图

就能得到开头时效果图的按钮组合了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* 按钮的公共样式 */
QPushButton {
border-width: 0 0 0 0;
width: 64px;
height: 64px;
min-width: 64px;
max-width: 64px;
min-height: 64px;
max-height: 64px;
}

/* 中间的按钮 */
#centerButton {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/center.png);
}
#centerButton:hover {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/center-hover.png);
}
#centerButton:pressed {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/center-pressed.png);
}

/* 顶部的按钮 */
#topButton {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/top.png);
}
#topButton:hover {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/top-hover.png);
}
#topButton:pressed {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/top-pressed.png);
}

/* 右边的按钮 */
#rightButton {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/right.png);
}
#rightButton:hover {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/right-hover.png);
}
#rightButton:pressed {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/right-pressed.png);
}

/* 底部的按钮 */
#bottomButton {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/bottom.png);
}
#bottomButton:hover {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/bottom-hover.png);
}
#bottomButton:pressed {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/bottom-pressed.png);
}

/* 左边的按钮 */
#leftButton {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/left.png);
}
#leftButton:hover {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/left-hover.png);
}
#leftButton:pressed {
border-image: url(/Users/Biao/Desktop/abnormity-buttons/left-pressed.png);
}

上面使用的图片请下载 abnormity-buttons.7z,别忘了把 QSS 中图片的路径修改为自己项目中的真实路径。

思考

也许你会问,你这些图片在哪里找到的?

  • 如果公司有 Ui 设计师,找他们要吧
  • 有很多提供图片下载的网站,我比较喜欢用阿里巴巴矢量图标库,里面还可以进行搜索
  • 你也许还会问,我就只找到一个向下的箭头图标,找不到另外几个方向的,这个好办,旋转一下图片就可以了嘛,也就是说找到一个方向的图片,另外几个方向的也得到了

为什么不用 background-image 设置背景图?

使用 background-image 设置背景图时,如果背景图和 widget 的大小不一样,效果就很不理想,不会拉伸填满 widget,使用 border-image 可以解决这个问题,例如上面使用的背景图是 128x128 的,按钮的大小是 64x64 的,最终的效果很好。