显示目录

实现 Steps 路径样式

如下图使用多个 步骤 表示一个过程:

这样的组件 Qt 没有提供,需要我们自己实现,可以用下面几种方式实现:

  • 使用 QPainter 绘图:计算每一个步骤的图形(可以使用 QPainterPath)和位置,然后在 QPainterPath 上填充背景和文字

  • QPushButton + QSS Border-Image + 绝对坐标定位:因为 QPushButton 之间有重叠,而不是一个紧挨着一个的排列,所以需要计算每个步骤的坐标进行定位,使用 PS 设计步骤在不同状态时的背景图,需要 6 张图片:

    • 当前步骤:第一个位置的图、中间的图、最后一个位置的图

    • 非当前步骤:第一个位置的图、中间的图、最后一个位置的图

    • 每个图是步骤的完整背景图,例如

      优点:直观

      缺点:需要手动计算坐标

  • QPushButton + QSS Border-Image + QHBoxLayout:使用 Layout 把 QPushButton 一个紧挨着一个的排列,使用 PS 设计步骤在不同状态时的背景图,需要 5 张图片:

    • 当前步骤:当前步骤前一个步骤的图、最后一个位置的图

    • 非当前步骤:第一个位置的图、中间的图、最后一个位置的图

    • 每个图都不是步骤的完整背景图,例如

      优点:能够使用 Layout 进行布局,不需要手动计算坐标

      缺点:不够直观,不过,在步骤之间加一点空隙,估计大家都明白怎么做了:每一个步骤的背景都有一部分在它的前一个步骤上:

下面介绍 QPushButton + QSS Border-Image + QHBoxLayout 的实现,其他两种方式感兴趣的话就自己思考一下怎么实现:

  • 关键是类 StepWidget、style.qss 以及背景图
  • 类 UiUtil 用于加载 style.qss,下载最后的工程文件进行查看
  • main.cpp 用于启动程序

StepWidget

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
// 文件名: StepWidget.h
#ifndef STEPWIDGET_H
#define STEPWIDGET_H
#include <QWidget>
#include <QPushButton>
#include <QList>
class StepWidget : public QWidget {
Q_OBJECT
public:
StepWidget(QWidget *parent = 0);
~StepWidget();
protected slots:
// 步骤按钮的槽,把被点击的按钮切换为当前步骤的按钮,然后更新样式
void updateStepButtonsStyle();
private:
// 把所有的按钮都放到 list 里,这样就很容易找到第一个,最后一个,当前的前一个等
QList<QPushButton*> stepButtons;
};
#endif // STEPWIDGET_H
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
// 文件名: StepWidget.cpp
#include "StepWidget.h"
#include "UiUtil.h"
#include <QPushButton>
#include <QHBoxLayout>
#include <QShortcut>
#include <QKeySequence>
#include <QDebug>
StepWidget::StepWidget(QWidget *parent) : QWidget(parent) {
QHBoxLayout *layout = new QHBoxLayout();
QStringList steps = QStringList() << "提交订单" << "付款成功" << "商品出库" << "------ 快递中-等待收货 ------" << "完成";
// 创建 steps.size() 个按钮,每个按钮表示一个步骤
foreach (const QString &step, steps) {
QPushButton *button = new QPushButton(step);
button->setFlat(true);
stepButtons.append(button);
layout->addWidget(button);
connect(button, SIGNAL(clicked()), this, SLOT(updateStepButtonsStyle()));
}
layout->addStretch();
layout->setSpacing(0);
setLayout(layout);
// 初始化按钮的状态,有 5 个状态: middle, last, active-middle, active-last, active-prev
foreach (QPushButton *b, stepButtons) {
b->setProperty("class", "StepButton");
b->setProperty("status", "middle");
}
stepButtons.last()->setProperty("status", "last");
stepButtons.at(2)->click(); // 点击第 3 个按钮,让其为当前按钮,这样方便观察效果
}
StepWidget::~StepWidget() {
}
void StepWidget::updateStepButtonsStyle() {
QPushButton *clickedButton = qobject_cast<QPushButton*>(sender()); // 被点击的按钮
int clickedIndex = stepButtons.indexOf(clickedButton);
QPushButton *prevButton = stepButtons.value(clickedIndex - 1); // 被点击的按钮的前一个按钮
bool isLast = (clickedIndex == stepButtons.size() - 1); // 是否点击最后一个按钮
// 恢复所有按钮的 status 为初始状态
foreach (QPushButton *b, stepButtons) {
b->setProperty("status", "middle");
}
stepButtons.last()->setProperty("status", "last");
// 设置被点击的按钮的 status 属性为 active-middle,如果是最后一个按钮则为 active-last
clickedButton->setProperty("status", isLast ? "active-last" : "active-middle");
// 设置被点击的按钮的前一个按钮的 status 为 active-prev
prevButton && prevButton->setProperty("status", "active-prev");
// 属性变化后,使属性选择器的 QSS 生效
this->setStyleSheet("/**/");
}

StepButton 要设置 flat 为 true,清除默认的 border、margin 等,添加的 QSS 的效果才更理想。

给按钮设置 class 属性为 StepButton,是为了避免它们的 QSS 影响其他 QPushButton 的样式。

按钮有 5 个状态: middle, last, active-middle, active-last, active-prev

  • 初始时第一个到倒数第二个的状态是 middle,最后一个的状态是 last
  • 当点击一个按钮后,它变为当前按钮,状态变为 active-middle,如果它是最后一个按钮,则为 active-last
  • 当前按钮的前一个按钮的状态是 active-prev
  • 按钮的属性变化后对应的 QSS 不会自动生效,需要调用 setStyleSheet("/**/") 才行

style.qss

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
.StepButton {
min-width: 80px;
min-height: 40px;
max-height: 40px;
padding-left: 10px;
padding-right: -10px;
border-width: 0px 22px 0px 0px;
}
.StepButton[status="middle"] {
/* repeat: 水平平铺,stretch: 垂直拉伸 */
border-image: url(:/img/normal.png) 0 22 0 0 repeat stretch;
}
.StepButton[status="last"] {
border-image: url(:/img/last.png) 0 22 0 0 repeat stretch;
}
.StepButton[status="active-middle"] {
border-image: url(:/img/active.png) 0 22 0 0 repeat stretch;
}
.StepButton[status="active-last"] {
border-image: url(:/img/last-active.png) 0 22 0 0 repeat stretch;
}
.StepButton[status="active-prev"] {
border-image: url(:/img/active-pre.png) 0 22 0 0 repeat stretch;
}

.StepButton 中定义共有的 QSS,限定了最小宽度和高度等是为了看上去效果更好,并不是必须是上面给定的数值。不同状态下定义对应次状态的 border-image,它会覆盖 .StepButton 中相同的 QSS。

上面 QSS 的关键是 Border-Image 的应用,相关教程请参考 Border Image

工程源码

Qt-Steps.7z

运行时把 bin 目录下的 style.qss 复制到编译出来的可执行文件所在目录:Windows 为 Steps.exe,Linux、Mac 为 Steps。