半透明背景

该示例展示了如何制作一个具有半透明背景的圆形窗口。

将背景设置为半透明的小工具，所有未涂画的像素都将是透明的，而涂画的像素不透明度小于 100%，背景就会发亮。完全未涂画的像素也不会接收任何鼠标输入。这可用于自定义顶层窗口小部件的形状。在大多数窗口系统中，设置某些窗口标志会导致窗口装饰（标题栏、窗口边框、按钮）失效，从而允许创建特殊形状的窗口。在本例中，我们使用这一功能创建了一个包含模拟时钟的圆形窗口。

由于该示例窗口不提供File 菜单或关闭按钮，因此我们提供了一个带有Exit 条目的上下文菜单，以便关闭该示例。单击窗口上的鼠标右键即可打开该菜单。

ShapedClock 类定义

ShapedClock 类基于模拟时钟示例中定义的AnalogClock 类。整个类的定义如下：

class ShapedClock : public QWidget
{
    Q_OBJECT

public:
    ShapedClock(QWidget *parent = nullptr);
    QSize sizeHint() const override;

protected:
    void mouseMoveEvent(QMouseEvent *event) override;
    void mousePressEvent(QMouseEvent *event) override;
    void paintEvent(QPaintEvent *event) override;

private:
    QPoint dragPosition;
};

paintEvent() 实现在半透明背景（钟面）上绘制一个模拟时钟。此外，我们还实现了sizeHint() 功能，因此无需明确调整窗口部件的大小。

由于包含时钟窗口部件的窗口没有标题栏，因此我们提供了mouseMoveEvent() 和mousePressEvent() 的实现，以便在屏幕上拖动时钟。通过dragPosition 变量，我们可以跟踪用户上次点击窗口部件的位置。

ShapedClock 类的实现

ShapedClock 构造函数设置了一个定时器，并将其连接到 widget 的 update() 槽。此外，我们还为窗口小部件添加了一个动作，当右键单击窗口小部件时，该动作将自动通过上下文菜单显示出来。

ShapedClock::ShapedClock(QWidget *parent)
    : QWidget(parent, Qt::FramelessWindowHint | Qt::WindowSystemMenuHint)
{
    setAttribute(Qt::WA_TranslucentBackground);
    QTimer *timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, QOverload<>::of(&ShapedClock::update));
    timer->start(1000);

    QAction *quitAction = new QAction(tr("E&xit"), this);
    quitAction->setShortcut(tr("Ctrl+Q"));
    connect(quitAction, &QAction::triggered, qApp, &QCoreApplication::quit);
    addAction(quitAction);

    setContextMenuPolicy(Qt::ActionsContextMenu);
    setToolTip(tr("Drag the clock with the left mouse button.\n"
                  "Use the right mouse button to open a context menu."));
    setWindowTitle(tr("Shaped Analog Clock"));
}

我们通过设置Qt::WA_TranslucentBackground widget 属性来请求透明窗口。我们通过在 widget 上设置Qt::FramelessWindowHint 标志，告知窗口管理器该 widget 不需要窗框装饰。因此，我们需要为用户提供一种在屏幕上移动时钟的方法。

鼠标按钮事件将被发送到mousePressEvent() 处理程序：

void ShapedClock::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton) {
        dragPosition = event->globalPosition().toPoint() - frameGeometry().topLeft();
        event->accept();
    }
}

如果鼠标左键被按在窗口部件上，我们将记录窗口部件框架左上角位置（即使在隐藏状态下）与鼠标点击点之间的全局（屏幕）坐标位移。如果用户在按住左键的同时移动鼠标，就会用到这个位移。由于我们对事件采取了行动，因此我们通过调用accept() 函数来接受该事件。

如果鼠标移动到 widget 上，就会调用mouseMoveEvent() 处理程序。

void ShapedClock::mouseMoveEvent(QMouseEvent *event)
{
    if (event->buttons() & Qt::LeftButton) {
        move(event->globalPosition().toPoint() - dragPosition);
        event->accept();
    }
}

如果在移动鼠标时按住左键，部件的左上角就会移动到全局坐标中当前光标位置减去dragPosition 后的位置。如果我们拖动部件，也会接受该事件。

paintEvent() 函数主要与模拟时钟示例中描述的相同。唯一不同的是，我们使用QPainter::drawEllipse() 绘制圆形钟面。我们将绘制者的不透明度降至 90%，并使用调色板的默认背景色。

void ShapedClock::paintEvent(QPaintEvent *)
{
    static const QPoint hourHand[4] = {
        QPoint(5, 14),
        QPoint(-5, 14),
        QPoint(-4, -71),
        QPoint(4, -71)
    };
    static const QPoint minuteHand[4] = {
        QPoint(4, 14),
        QPoint(-4, 14),
        QPoint(-3, -89),
        QPoint(3, -89)
    };
    static const QPoint secondsHand[4] = {
       QPoint(1, 14),
       QPoint(-1, 14),
       QPoint(-1, -89),
       QPoint(1, -89)
    };

    const QColor hourColor(palette().color(QPalette::Text));
    const QColor minuteColor(palette().color(QPalette::Text));
    const QColor secondsColor(palette().color(QPalette::Accent));

    int side = qMin(width(), height());
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.translate(width() / 2, height() / 2);
    painter.scale(side / 200.0, side / 200.0);

    painter.setPen(Qt::NoPen);
    painter.setBrush(palette().window());
    painter.setOpacity(0.9);
    painter.drawEllipse(QPoint(0, 0), 98, 98);
    painter.setOpacity(1.0);

    QTime time = QTime::currentTime();
    painter.setPen(Qt::NoPen);
    painter.setBrush(hourColor);

    {
        QPainterStateGuard guard(&painter);
        painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0)));
        painter.drawConvexPolygon(hourHand, 4);
    }

    for (int i = 0; i < 12; ++i) {
        painter.drawRect(73, -3, 16, 6);
        painter.rotate(30.0);
    }

    painter.setBrush(minuteColor);

    {
        QPainterStateGuard guard(&painter);
        painter.rotate(6.0 * time.minute());
        painter.drawConvexPolygon(minuteHand, 4);
    }

    painter.setBrush(secondsColor);

    {
        QPainterStateGuard guard(&painter);
        painter.rotate(6.0 * time.second());
        painter.drawConvexPolygon(secondsHand, 4);
        painter.drawEllipse(-3, -3, 6, 6);
        painter.drawEllipse(-5, -68, 10, 10);
    }

    painter.setPen(minuteColor);

    for (int j = 0; j < 60; ++j) {
        painter.drawLine(92, 0, 96, 0);
        painter.rotate(6.0);
    }
}

最后，我们为小部件实现了sizeHint() ，以便在首次显示时为其提供合理的默认大小：

QSize ShapedClock::sizeHint() const
{
    return QSize(200, 200);
}

示例项目 @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.