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

Qt自定义步骤引导按钮

article 2025/1/5 10:49:27

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]);
    }
}