如何在 QT 中设计具有自定义形状的按钮答案

【问题标题】：How to design buttons with custom shapes in QT如何在 QT 中设计具有自定义形状的按钮
【发布时间】：2020-12-28 23:07:30
【问题描述】：

我正在尝试在 Qt 中设计一系列带有箭头形状的自定义按钮，但我找不到方法。我需要类似下图中的按钮之类的东西，以便管理我的程序的工作流程并引导用户完成它。图片的文字应为“Step 1”、“Step 2”和“Step 3”。对不起这个错误。欢迎任何帮助或建议。感谢您的帮助。

【问题讨论】：

标签： qt button qt4

【解决方案1】：

头文件：

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(); 函数来创建按钮。

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

结果是

【讨论】：

【解决方案2】：

如果您不想自己完成所有的绘画，您可以使用三个普通的QPushButtons 和setIcon() 来包含三个部分的自定义图形剪切，同时将flat 属性设置为true。

可能需要将它们分组到父窗口小部件中以控制它们的位置和大小，具体取决于您的布局。

【讨论】：

这仍然准确吗？

【解决方案3】：

您可以使用一个小部件而不是树并在小部件的paintEvent() 函数中绘制内容（第 1 步、第 2 步...）。在鼠标单击（或其他）事件中，您可以计算事件发生在哪个虚拟按钮上并执行相应的操作。

【讨论】：