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