Qt 实现新手引导

Qt实现新手引导

对于一个新安装的软件或者一个新的功能，提供一个新手引导步骤，能够让用户快速熟悉。

这是最终效果，每一个按钮都会有一个简单引导，通过点击上一步、下一步来切换不同的指导。当前引导的功能，会有一个高光区，该高光区可点击，其他区域不可点击。引导结束后回归主界面。

引导层

void GuideOverlayTip::updateWidgets()
{
    if (m_currentStep >= m_highlightRects.size())
    {
        hide();
        return;
    }

    if(m_currentStep == m_highlightRects.size() - 1)
    {
        m_btnPrev->setText(tr("完成"));
    }

    QRect rect = m_highlightRects[m_currentStep];

    m_tipLabel->setText(m_tips[m_currentStep]);
    m_tipLabel->adjustSize();
    m_tipLabel->move(rect.topRight() + QPoint(10, -rect.height()/2));


    if(m_currentStep != 0)
    {
        m_btnPrev->move(rect.bottomLeft() + QPoint(-80, 10));
        m_btnPrev->show();
    }
    else
    {
        m_btnPrev->hide();
    }
    m_btnNext->move(rect.bottomRight() + QPoint(10, 10));
}

根据当前引导，更新btn、label顺序、文本显示。

void GuideOverlayTip::updateMask()
{
    if (m_currentStep >= m_highlightRects.size())
    {
        return;
    }
    QRegion fullRegion(rect());
    QRegion highlightRegion(m_highlightRects[m_currentStep].adjusted(0, 0, 1, 1), QRegion::Rectangle);
    QRegion maskedRegion = fullRegion.subtracted(highlightRegion);

    setMask(maskedRegion);
}

setMask可以遮挡非高光区的事件。

void GuideOverlayTip::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    
    QPainterPath maskPath;
    maskPath.addRect(rect());
    maskPath.addRoundedRect(m_highlightRect, 8, 8);
    maskPath.setFillRule(Qt::OddEvenFill);

    painter.fillPath(maskPath, QColor(0, 0, 0, 160));
}

根据需求绘制一个半透明的背景。

调用层

void MainWindow::showGuide()
{
    QList<QRect> steps;
    QStringList tips;

    for (int i = btn1; i <= btn4; ++i)
    {
        QPushButton* btn = m_pushBtns[i];
        QRect btnRect(this->mapFromGlobal(btn->mapToGlobal(QPoint(0, 0))), btn->size());
        steps << btnRect;
    }

    qDebug() << steps;

    tips << "点击这里改变改变背景颜色为A";
    tips << "点击这里改变改变背景颜色为B";
    tips << "点击这里改变改变背景颜色为C";
    tips << "点击这里恢复默认背景";

    m_guide->setSteps(steps, tips);
    m_guide->start();

}

传入高光区位置、提示文本等；
其中为m_guide = new GuideOverlayTip(this);