我正在尝试在Qt中设计一系列带箭头形状的自定义按钮,但是我找不到方法。我需要类似于下图中所示的按钮,以便管理我的程序工作流程并引导用户完成操作。
图像的文本应为“步骤1”,“步骤2”和“步骤3”。抱歉造成误解。
欢迎任何帮助或建议。
感谢您的帮助。
![workflow guide buttons](https://istack.dev59.com/TFkQA.webp)
头文件:
public:
void paintEvent(QPaintEvent* event); //--> drawing triangles
void createPushButtons();
const static int firstButtonX = 0; //--> topleft corner x value of first button
const static int firstButtonY = 0; //--> topleft corner y value of first button
const static int buttonWidth = 50;
const static int buttonHeight = 30;
const static int triangleWidth = 30;
QList<QColor> colors; //--> button colors
cpp文件:
我用按钮颜色填充颜色列表。
colors.append(Qt::red);
colors.append(Qt::blue);
colors.append(Qt::yellow);
调用createPushButtons();
函数创建pushButtons。
void MainWindow::createPushButtons()
{
QWidget * wdg = new QWidget(this);//--> widget contains pushButtons
wdg->setObjectName("buttonWidget");//--> I set object name in order to catch widget and pushButtons in PaintEvent()
setCentralWidget(wdg);//--> I add widget to app main layout
for(int i=0; i<colors.size(); i++)//--> Button count and color count must be same.
{
QPushButton *btn = new QPushButton(QString::number(i)+". button",wdg);//--> create pushButtons in parent wdg
btn->setGeometry(firstButtonX + (buttonWidth+triangleWidth)*i, firstButtonY, buttonWidth, buttonHeight);//--> I set geometry for pushButtons
btn->setStyleSheet(QString("background-color: %1;border-style: outset;border-width: 0px;").arg(colors.at(i).name()));//--> I change background color and clear border
}
}
void MainWindow::paintEvent(QPaintEvent *event)
{
QWidget *wdg = findChild<QWidget *>("buttonWidget");//--> I catch my widget
QList<QPushButton *> buttons = wdg->findChildren < QPushButton *>();//--> I find pushButtons
for(int i=0;i < buttons.size(); i++)
{
int x = buttons.at(i)->pos().x();//--> measurements for triangle
int y = buttons.at(i)->pos().y();
int w = buttons.at(i)->width();
int h = buttons.at(i)->height();
QRect r(x+w,y,triangleWidth,h);//--> I create rectangular area between pushButtons
QPainter painter(this);
qreal point3X = x+w + triangleWidth;//--> triangle corners
qreal point3Y = y + h/2 ;
qreal point1X = x+w;
qreal point1Y = y;
qreal point2X = x+w;
qreal point2Y = y+h;
QPainterPath path;
path.moveTo (point1X, point1Y);
path.lineTo (point2X, point2Y);
path.lineTo (point3X, point3Y);
painter.setPen (Qt :: NoPen);
if(i != buttons.size()-1)//--> I paint rectangular and triangle
{
painter.fillRect(r, QBrush (colors.at(i+1)));
}
painter.fillPath (path, QBrush (colors.at(i)));
}
}
结果是
QPushButtons
,并使用setIcon()
方法将自定义的图形切割成三部分,并将flat
属性设置为 true。您可以使用一个小部件代替树形结构,并在小部件的paintEvent()
函数中绘制内容(步骤1、步骤2...)。在鼠标单击(或其他)事件中,您可以计算出事件发生在哪个虚拟按钮上,并执行相应的操作。