当前位置：首页 > news >正文

架构下的按钮效果设置

news 2025/7/2 0:05:27

以下是一个完整的跨QML/Qt Widgets的主题方案实现，包含对按钮阴影的统一管理：

一、项目结构

Project/
├── core/
│   ├── thememanager.h
│   └── thememanager.cpp
├── widgets/
│   ├── mainwindow.h
│   ├── mainwindow.cpp
│   └── mainwindow.ui
├── qml/
│   └── main.qml
├── resources/
│   ├── themes/
│   │   ├── dark/
│   │   └── light/
│   └── icons/
└── main.cpp

二、核心主题管理器（ThemeManager）

// thememanager.h
#include <QObject>
#include <QColor>
#include <QMap>

class ThemeManager : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QColor buttonShadowColor READ buttonShadowColor NOTIFY themeChanged)
    Q_PROPERTY(qreal shadowRadius READ shadowRadius NOTIFY themeChanged)
    
public:
    enum Theme { Light, Dark };
    Q_ENUM(Theme)

    static ThemeManager* instance();

    void applyTheme(Theme theme);
    
    // 供Widgets使用的接口
    QColor buttonShadowColor() const;
    qreal shadowRadius() const;
    QMap<QString, QVariant> currentTheme() const;

signals:
    void themeChanged();
    void widgetThemeChanged(); // 用于通知Widgets更新

private:
    explicit ThemeManager(QObject *parent = nullptr);
    void loadThemeConfig(Theme theme);

    QMap<QString, QVariant> m_currentTheme;
};

// thememanager.cpp
#include "thememanager.h"

ThemeManager* ThemeManager::instance()
{
    static ThemeManager instance;
    return &instance;
}

void ThemeManager::applyTheme(Theme theme)
{
    loadThemeConfig(theme);
    emit themeChanged();
    emit widgetThemeChanged();
}

QColor ThemeManager::buttonShadowColor() const
{
    return m_currentTheme["buttonShadowColor"].value<QColor>();
}

qreal ThemeManager::shadowRadius() const
{
    return m_currentTheme["shadowRadius"].toReal();
}

void ThemeManager::loadThemeConfig(Theme theme)
{
    m_currentTheme.clear();
    
    switch(theme) {
    case Dark:
        m_currentTheme["buttonShadowColor"] = QColor(0, 0, 0, 150);
        m_currentTheme["shadowRadius"] = 12.0;
        break;
    case Light:
        m_currentTheme["buttonShadowColor"] = QColor(100, 100, 100, 120);
        m_currentTheme["shadowRadius"] = 8.0;
        break;
    }
}

三、Qt Widgets集成方案

自定义按钮阴影效果类：

// shadowbutton.h
#include <QPushButton>
#include <QGraphicsDropShadowEffect>

class ShadowButton : public QPushButton
{
    Q_OBJECT
    Q_PROPERTY(bool shadowEnabled READ shadowEnabled WRITE setShadowEnabled)
    
public:
    explicit ShadowButton(QWidget *parent = nullptr);
    
    void updateShadow(const QColor &color, qreal radius);
    bool shadowEnabled() const;
    void setShadowEnabled(bool enabled);

private:
    QGraphicsDropShadowEffect* m_shadowEffect;
    bool m_shadowEnabled = true;
};

// shadowbutton.cpp
#include "shadowbutton.h"

ShadowButton::ShadowButton(QWidget *parent)
    : QPushButton(parent),
      m_shadowEffect(new QGraphicsDropShadowEffect(this))
{
    m_shadowEffect->setEnabled(false);
    setGraphicsEffect(m_shadowEffect);
}

void ShadowButton::updateShadow(const QColor &color, qreal radius)
{
    if(!m_shadowEnabled) return;
    
    m_shadowEffect->setColor(color);
    m_shadowEffect->setBlurRadius(radius);
    m_shadowEffect->setOffset(4, 4);
    m_shadowEffect->setEnabled(true);
}

// 在Qt Designer中显示阴影效果的设置
bool ShadowButton::shadowEnabled() const { return m_shadowEnabled; }
void ShadowButton::setShadowEnabled(bool enabled) 
{
    m_shadowEnabled = enabled;
    m_shadowEffect->setEnabled(enabled);
}

主窗口实现：

// mainwindow.cpp
#include "mainwindow.h"
#include "thememanager.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setupUi(this);
    
    // 自动查找所有ShadowButton实例
    findChildren<ShadowButton*>().forEach([](ShadowButton* btn){
        ThemeManager::instance()->registerShadowButton(btn);
    });
    
    connect(ThemeManager::instance(), &ThemeManager::widgetThemeChanged, 
        this, &MainWindow::updateTheme);
}

void MainWindow::updateTheme()
{
    auto theme = ThemeManager::instance()->currentTheme();
    QColor shadowColor = theme["buttonShadowColor"].value<QColor>();
    qreal radius = theme["shadowRadius"].toReal();
    
    findChildren<ShadowButton*>().forEach([=](ShadowButton* btn){
        btn->updateShadow(shadowColor, radius);
    });
}

四、QML集成方案

// ThemeButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Button {
    id: root
    
    property bool shadowEnabled: true
    property color shadowColor: ThemeManager.buttonShadowColor
    property real shadowRadius: ThemeManager.shadowRadius
    
    layer.enabled: shadowEnabled
    layer.effect: DropShadow {
        color: shadowColor
        radius: shadowRadius
        samples: 16
        verticalOffset: 4
        horizontalOffset: 4
    }
    
    background: Rectangle {
        color: "white"
        radius: 4
    }
}

五、UI文件集成（mainwindow.ui）

<ui version="4.0">
  <widget class="ShadowButton" name="btnSubmit">
    <property name="text">
      <string>Submit</string>
    </property>
    <property name="shadowEnabled">
      <bool>true</bool>
    </property>
  </widget>
</ui>

六、主题切换控制

// ThemeSwitcher.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

Row {
    spacing: 10
    
    Button {
        text: "Light"
        onClicked: ThemeManager.applyTheme(ThemeManager.Light)
    }
    
    Button {
        text: "Dark"
        onClicked: ThemeManager.applyTheme(ThemeManager.Dark)
    }
}

七、初始化与注册（main.cpp）

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    // 注册QML类型
    qmlRegisterType<ThemeManager>("AppTheme", 1, 0, "ThemeManager");
    qmlRegisterSingletonInstance("AppTheme", 1, 0, "ThemeManager", ThemeManager::instance());
    
    // 加载QML
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("themeManager", ThemeManager::instance());
    engine.load(QUrl("qrc:/qml/main.qml"));
    
    // 显示Widgets窗口
    MainWindow w;
    w.show();
    
    return app.exec();
}

八、主题配置文件示例

// themes/dark/theme.json
{
    "button": {
        "shadow": {
            "color": "rgba(0, 0, 0, 0.6)",
            "radius": 12.0,
            "offset": [4, 4]
        }
    }
}

九、关键特性说明

统一管理机制：
- QML通过属性绑定自动更新
- Widgets通过信号槽手动更新
- 共享同一套主题配置数据

性能优化：

// 异步主题切换
void ThemeManager::applyThemeAsync(Theme theme)
{
    QtConcurrent::run([=](){
        loadThemeConfig(theme);
        QMetaObject::invokeMethod(this, [=](){
            emit themeChanged();
            emit widgetThemeChanged();
        });
    });
}

设计时预览：

// 在Qt Designer中预览阴影效果
DesignButton {
    shadowColor: "#40000000"
    shadowRadius: 8
}

动态调整能力：

// 运行时修改阴影参数
void ThemeManager::setShadowParams(qreal radius, const QColor &color)
{
    m_currentTheme["shadowRadius"] = radius;
    m_currentTheme["buttonShadowColor"] = color;
    emit themeChanged();
    emit widgetThemeChanged();
}