Qt 5 實作 Web 酷狗音樂客戶端（無邊框視窗、拖曳、Flash 支援）

專案概覽

使用 Qt 5.1.1 的 QWebView（WebKit）載入 https://web.kugou.com，實現桌面客戶端體驗：無系統標題欄、自訂標題列（可拖曳移動視窗）、最小化/關閉按鈕、Flash 插件支援、背景漸層融合網頁介面。

專案結構

WebKugouWidget.pro
main.cpp
webkugouwidget.h
webkugouwidget.cpp

核心程式碼

.pro 設定

QT += core gui webkitwidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
TARGET = WebKugouWidget
TEMPLATE = app
SOURCES += main.cpp webkugouwidget.cpp
HEADERS += webkugouwidget.h

webkugouwidget.h

#ifndef WEBKOGOUWIDGET_H
#define WEBKOGOUWIDGET_H

#include <QtWebKitWidgets>
#include <QtWidgets>

class WebKugouWidget : public QWidget {
    Q_OBJECT
public:
    explicit WebKugouWidget(QWidget *parent = nullptr);
    ~WebKugouWidget();

private:
    QWebView *kgwebView;
    QLabel *titleBar;
    QToolButton *closeBtn;
    QPushButton *minToTrayBtn, *minBtn;

    // 滑鼠拖曳視窗
    bool isPressed;
    QPoint dragPos;
    void mousePressEvent(QMouseEvent *e) override;
    void mouseMoveEvent(QMouseEvent *e) override;
    void mouseReleaseEvent(QMouseEvent *e) override;

private slots:
    void onMinToTray();
    void onClose();

signals:
    void minimizedToTray();
};

#endif

webkugouwidget.cpp 關鍵實作

WebKugouWidget::WebKugouWidget(QWidget *parent) : QWidget(parent), isPressed(false) {
    // 1. 插件路徑（Flash）
    qApp->addLibraryPath("./plugins"); // 需放置 NPSWF32_*.dll

    // 2. Web 設定
    QWebSettings *s = QWebSettings::globalSettings();
    s->setAttribute(QWebSettings::PluginsEnabled, true);
    s->setAttribute(QWebSettings::JavascriptEnabled, true);
    s->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);

    // 3. 無邊框視窗
    setWindowFlags(Qt::FramelessWindowHint);

    // 4. 載入網頁
    kgwebView = new QWebView(this);
    kgwebView->page()->setLinkDelegationPolicy(QWebPage::DelegateAllLinks);
    kgwebView->page()->mainFrame()->setScrollBarPolicy(Qt::Horizontal, Qt::ScrollBarAlwaysOff);
    kgwebView->load(QUrl("https://web.kugou.com/index.html?"));
    kgwebView->setGeometry(-1, 0, 740, 508);
    kgwebView->setStyleSheet("background: rgba(1,160,234,0);"); // 透明背景配合標題列漸層

    // 5. 自訂標題列（覆蓋網頁頂部控制列）
    titleBar = new QLabel(" WebKugou", this);
    titleBar->setGeometry(0, 0, 747, 30);
    titleBar->setCursor(Qt::SizeAllCursor);

    // 6. 按鈕
    closeBtn = new QToolButton(this);
    closeBtn->setGeometry(715, 0, 25, 25);
    closeBtn->setText("×");
    connect(closeBtn, &QToolButton::clicked, this, &WebKugouWidget::onClose);

    minToTrayBtn = new QPushButton("↘", this);
    minToTrayBtn->setGeometry(690, 0, 25, 25);
    connect(minToTrayBtn, &QPushButton::clicked, this, &WebKugouWidget::onMinToTray);

    minBtn = new QPushButton("-", this);
    minBtn->setGeometry(665, 0, 25, 25);
    connect(minBtn, &QPushButton::clicked, this, &QWidget::showMinimized);

    resize(740, 510);

    // 7. 樣式表（邊框、按鈕懸停、標題列漸層）
    setStyleSheet(R"(
        WebKugouWidget { border:5px solid gray; border-color:rgb(1,160,234); font-size:12pt; color:white; }
        QToolButton { font:13pt Arial; color:white; background:transparent; }
        QToolButton:hover { background:qlineargradient(spread:pad, x1:0,y1:0,x2:0,y2:1, stop:0 rgba(254,67,101,220), stop:1 rgba(254,67,101,0)); }
        QPushButton { color:white; background:transparent; }
        QPushButton:hover { background:qlineargradient(spread:pad, x1:0,y1:0,x2:0,y2:1, stop:0 rgba(170,138,87,220), stop:1 rgba(170,138,87,0)); }
        QLabel { color:white; font-size:15pt; background:qlineargradient(x1:0,y1:0,x2:0,y2:1, stop:0 rgb(3,208,234), stop:0.8 rgb(1,160,234), stop:1 rgb(1,160,234)); }
    )");
}

void WebKugouWidget::mousePressEvent(QMouseEvent *e) {
    if (e->button() == Qt::LeftButton) {
        dragPos = e->globalPos() - pos();
        isPressed = true;
        e->accept();
    }
}
void WebKugouWidget::mouseMoveEvent(QMouseEvent *e) {
    if (isPressed && (e->buttons() & Qt::LeftButton)) {
        move(e->globalPos() - dragPos);
        e->accept();
    }
}
void WebKugouWidget::mouseReleaseEvent(QMouseEvent *e) {
    if (e->button() == Qt::LeftButton) { isPressed = false; e->accept(); }
}
void WebKugouWidget::onClose() { hide(); qApp->exit(0); }
void WebKugouWidget::onMinToTray() { emit minimizedToTray(); }

main.cpp

#include "webkugouwidget.h"
#include <QApplication>
int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    WebKugouWidget w; w.show();
    return a.exec();
}

關鍵技術點

• 無邊框拖曳：FramelessWindowHint + 重寫滑鼠事件，計算全域位置差值移動視窗。
• Flash 支援：Qt WebKit 需 PluginsEnabled 並將 NPSWF32_*.dll 放入 ./plugins（Release 模式下），Debug 模式載入 Flash 易崩潰。
• 標題列遮蓋：QLabel 固定高度 30px 蓋住網頁原生頂部，配合漸層背景無縫銜接。
• 透明背景：rgba(1,160,234,0) 使網頁背景透出標題列漸層色。

截圖展示

遷移建議：Qt WebEngine

Qt 5.6+ 棄用 WebKit，改用 Chromium 內核的 QtWebEngine。遷移要點：

• QT += webenginewidgets，#include <QtWebEngineWidgets>。
• QWebView → QWebEngineView，API 大體相容。
• Flash 已被瀏覽器淘汰，酷狗網頁版現應為 HTML5 播放器，無需 Flash 插件。
• 需處理 QWebEnginePage::setAudioMuted、profile()->setPersistentCookiesPolicy 等新 API。

原文出處

本文出自 “水水的菜鳥” 博客：https://cpp51.blog.51cto.com/5346598/1308457