当前位置：首页 > news >正文

Qt自定义步骤引导按钮

news 2025/6/23 17:23:05

1. 步骤引导按钮

实际在开发项目过程中，由一些流程比较繁琐，为了给客户更好的交互体验，往往需要使用step1->step2这种引导对话框或者引导按钮来引导用户一步步进行设置；话不多说，先上效果
在这里插入图片描述

2. 实现原理

实现起来其实也并不复杂，主要是对外接口可以设置多个标题文本，以及当前高亮显示的索引即可

void setTitles(const QStringList &titles);
void setCurStep(int idx);

3.核心绘制代码

void StepGuideButton::paintEvent(QPaintEvent *ev)
{if (m_nSteps == 0) {return QWidget::paintEvent(ev);}QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);int w = this->width();int h = this->height();int wStepWidth = (w - (m_nLinks * LINK_WIDTH)) / m_nSteps;// 绘制背景painter.setPen(Qt::NoPen);painter.setBrush(m_background);painter.drawRoundedRect(QRect(0, 0, w, h), ROUND_RADIUS, ROUND_RADIUS);// 绘制连接点for (int i = 0; i < m_nLinks; ++i) {painter.setPen(Qt::white);painter.setBrush(Qt::white);QPointF ptList[6];ptList[0].setX((i + 1) * wStepWidth + i * LINK_WIDTH);ptList[0].setY(0);ptList[1].setX((i + 1) * wStepWidth + i * LINK_WIDTH + (LINK_WIDTH * 1.0 / 2));ptList[1].setY(0);ptList[2].setX((i + 1) * wStepWidth + (i + 1) * LINK_WIDTH);ptList[2].setY(h / 2.0);ptList[3].setX((i + 1) * wStepWidth + i * LINK_WIDTH + (LINK_WIDTH * 1.0 / 2));ptList[3].setY(h);ptList[4].setX((i + 1) * wStepWidth + i * LINK_WIDTH);ptList[4].setY(h);ptList[5].setX((i + 1) * wStepWidth + i * LINK_WIDTH + (LINK_WIDTH * 1.0 / 2));ptList[5].setY(h / 2.0);painter.drawPolygon(ptList, 6);}// 绘制高亮painter.setPen(Qt::NoPen);painter.setBrush(m_highLight);if (m_curIdx == 0 || m_curIdx == m_titles.size() - 1) {int tempIdx = m_curIdx > 0 ? m_curIdx : 0;painter.drawRoundedRect(QRect(m_curIdx * wStepWidth + tempIdx * LINK_WIDTH, 0, wStepWidth + tempIdx, h), ROUND_RADIUS, ROUND_RADIUS);QPointF ptList[5];if (m_curIdx == 0) {ptList[0].setX(wStepWidth / 2.0);ptList[0].setY(0);ptList[1].setX(wStepWidth);ptList[1].setY(0);ptList[2].setX(wStepWidth + LINK_WIDTH / 2.0);ptList[2].setY(h / 2.0);ptList[3].setX(wStepWidth);ptList[3].setY(h);ptList[4].setX(wStepWidth / 2.0);ptList[4].setY(h);;} else {ptList[0].setX(m_curIdx * (wStepWidth + LINK_WIDTH) - LINK_WIDTH / 2.0);ptList[0].setY(0);ptList[1].setX(m_curIdx * (wStepWidth + LINK_WIDTH) + wStepWidth / 2.0);ptList[1].setY(0);ptList[2].setX(m_curIdx * (wStepWidth + LINK_WIDTH) + wStepWidth / 2.0);ptList[2].setY(h);ptList[3].setX(m_curIdx * (wStepWidth + LINK_WIDTH) - LINK_WIDTH / 2.0);ptList[3].setY(h);ptList[4].setX(m_curIdx * (wStepWidth + LINK_WIDTH));ptList[4].setY(h / 2.0);}painter.drawPolygon(ptList, 5);} else {QPointF ptList[6];ptList[0].setX(m_curIdx * (wStepWidth + LINK_WIDTH) - LINK_WIDTH / 2.0);ptList[0].setY(0);ptList[1].setX(m_curIdx * (wStepWidth + LINK_WIDTH) + wStepWidth);ptList[1].setY(0);ptList[2].setX(m_curIdx * (wStepWidth + LINK_WIDTH) + wStepWidth + LINK_WIDTH / 2.0);ptList[2].setY(h / 2.0);ptList[3].setX(m_curIdx * (wStepWidth + LINK_WIDTH) + wStepWidth);ptList[3].setY(h);ptList[4].setX(m_curIdx * (wStepWidth + LINK_WIDTH) - LINK_WIDTH / 2.0);ptList[4].setY(h);ptList[5].setX(m_curIdx * (wStepWidth + LINK_WIDTH));ptList[5].setY(h / 2.0);painter.drawPolygon(ptList, 6);}// 绘制文本painter.setPen(m_text);for (int i = 0; i < m_nSteps; ++i) {painter.drawText(QRect(i * wStepWidth + (i > 0 ? i * LINK_WIDTH : 0), 0, wStepWidth, h), Qt::AlignCenter, m_titles[i]);}
}