按钮控件
按钮控件
UIGQPushButton 是 WidgetKit 的按钮控件,用于普通操作按钮、主按钮、图标按钮、工具栏按钮和导航按钮。
按钮支持按状态配置背景和文字样式,支持 PNG/SVG 图标,SVG 图标可以保留原始颜色,也可以由控件统一指定颜色。
常见状态
- 默认状态(Normal)
- 鼠标悬停状态(Hot)
- 鼠标按下状态(Pressed)
- 禁用状态(Disable)
C++ 使用
UIGQPushButton* button = new UIGQPushButton(parent);
button->setObjectName("saveButton");
button->setText("保存");
button->setThemeName("PrimaryButton");
button->setIcon(":/UIGearsWidgetKit/images/save.svg");
button->setFadeEnabled(true);
button->setFadeDuration(160);
按钮 fade 效果默认关闭。可以通过全局配置统一开启,也可以单独设置某个按钮:
UIGQtLib::UIGGlobalConfig config;
config.globalFontFamily = "Microsoft YaHei";
config.buttonFadeEnabled = true;
config.buttonFadeDuration = 160;
UIGQtLib::uigSetGlobalConfig(config);
button->setFadeEnabled(false);
类继承关系
QWidget
└─ QAbstractButton
└─ QPushButton
└─ UIGQPushButton
IUIGQWidgetBase
└─ UIGQPushButton
UIGQPushButton 同时继承 Qt 的 QPushButton 和 WidgetKit 的 IUIGQWidgetBase。因此它既可以使用 Qt 标准按钮能力,例如 setText(...)、clicked 信号、setEnabled(...),也可以使用 WidgetKit 的主题、布局和 JSON 序列化能力。
内部实现上,每个 UIGQPushButton 持有一个 UIGQWidgetBase 基础控制对象和一个 UIGQPushButtonImpl 绘制实现对象:
| 类型 | 作用 |
|---|---|
QPushButton |
Qt 标准按钮基类,提供点击、文本、启用禁用、事件分发等基础能力。 |
IUIGQWidgetBase |
WidgetKit 控件统一接口,提供主题名、布局策略、JSON 读写等能力。 |
UIGQWidgetBase |
控件通用数据对象,保存布局、主题、透明度等基础属性。 |
UIGQPushButtonImpl |
按钮专用实现,负责背景、文字、图标、fade 动画和属性读写。 |
控件接口说明
构造
| 接口 | 说明 | 参数 | 返回值 |
|---|---|---|---|
UIGQPushButton(QWidget* parent = nullptr) |
创建按钮控件。 | parent:父控件,可为空。 |
控件实例 |
主题和序列化
| 接口 | 说明 | 参数 | 返回值 |
|---|---|---|---|
void setThemeName(const QString& themeName) |
设置主题名。控件会从当前主题的 theme.json 中读取同名配置。 |
themeName:主题配置名称。 |
void |
QString getThemeName() const |
获取当前主题名。 | 无 | QString |
bool readJsonValue(void* value) |
从配置对象读取控件属性。通常由页面加载或设计器调用。 | value:指向配置对象。 |
bool |
bool serializeJsonValue(Json::Value* value, bool bRead = true) |
读写控件可序列化属性。 | value:配置对象;bRead:是否读取。 |
bool |
QString jsonData() const |
获取设计器属性字符串。 | 无 | QString |
void setJsonData(const QString& data) |
设置设计器属性字符串,并在首次设置时读取配置。 | data:属性字符串。 |
void |
背景和状态样式
| 接口 | 说明 | 参数 | 返回值 |
|---|---|---|---|
void setUseFillStyle(CtrlState state, bool useFillStyle) |
指定某个状态是否使用颜色填充样式。state 可传 UIG_STATE_ALL 批量设置。 |
state:控件状态;useFillStyle:是否使用填充样式。 |
void |
bool getUseFillStyle(CtrlState state) |
获取某个状态是否使用颜色填充样式。 | state:控件状态。 |
bool |
void setDrawBackground(bool drawBackground) |
设置是否绘制按钮背景。图标按钮、透明按钮常设为 false。 |
drawBackground:是否绘制背景。 |
void |
bool getDrawBackground() const |
获取是否绘制背景。 | 无 | bool |
void setBackground(CtrlState state, const FillStyle& fillStyle) |
设置某个状态的背景样式。state 可传 UIG_NORMAL、UIG_HOT、UIG_PRESSED、UIG_DISABLE 或 UIG_STATE_ALL。 |
state:控件状态;fillStyle:背景填充样式。 |
void |
const FillStyle& getBackground(CtrlState state) |
获取某个状态的背景样式。 | state:控件状态。 |
const FillStyle& |
void setTextStyle(CtrlState state, const TextStyleDesc& desc) |
设置某个状态的文字样式。 | state:控件状态;desc:文字样式描述。 |
void |
const TextStyleDesc& getTextStyle(CtrlState state) |
获取某个状态的文字样式。 | state:控件状态。 |
const TextStyleDesc& |
Fade 动画
| 接口 | 说明 | 参数 | 返回值 |
|---|---|---|---|
void setFadeEnabled(bool enabled) |
设置当前按钮是否启用 Hot/Normal 状态渐变。 | enabled:是否启用渐变。 |
void |
bool getFadeEnabled() const |
获取当前按钮是否启用渐变。 | 无 | bool |
void setFadeDuration(int duration) |
设置渐变时长,单位毫秒。小于等于 0 时按 150 处理。 |
duration:渐变时长,单位毫秒。 |
void |
int getFadeDuration() const |
获取当前渐变时长。 | 无 | int |
图标
| 接口 | 说明 | 参数 | 返回值 |
|---|---|---|---|
void setIcon(const QString& iconPath) |
设置图标路径。支持 PNG/SVG 和 Qt 资源路径。 | iconPath:图标路径或 Qt 资源路径。 |
void |
const QString getIcon() |
获取普通图标路径。 | 无 | QString |
void setIcon(const QIcon& icon) |
设置 Qt QIcon 图标。 |
icon:Qt 图标对象。 |
void |
void setHotIcon(const QString& iconPath) |
设置 Hot 状态图标路径。 | iconPath:Hot 状态图标路径。 |
void |
const QString getHotIcon() |
获取 Hot 状态图标路径。 | 无 | QString |
void setPressedIcon(const QString& iconPath) |
设置 Pressed 状态图标路径。 | iconPath:Pressed 状态图标路径。 |
void |
const QString getPressedIcon() |
获取 Pressed 状态图标路径。 | 无 | QString |
void setUseIcon(bool use) |
设置是否绘制图标。 | use:是否绘制图标。 |
void |
bool getUseIcon() |
获取是否绘制图标。 | 无 | bool |
const IconStyleDesc& getIconStyle() |
获取图标绘制样式,包括停靠、偏移、SVG 颜色等。 | 无 | const IconStyleDesc& |
void setIconStyle(const IconStyleDesc& style) |
设置图标绘制样式。 | style:图标绘制样式。 |
void |
文本
| 接口 | 说明 | 参数 | 返回值 |
|---|---|---|---|
void setShowText(bool show) |
设置是否绘制按钮文本。 | show:是否绘制文本。 |
void |
bool getShowText() |
获取是否绘制按钮文本。 | 无 | bool |
void setTextOffsetX(int offsetX) |
设置文本 X 偏移。 | offsetX:X 方向偏移量。 |
void |
int getTextOffsetX() |
获取文本 X 偏移。 | 无 | int |
void setTextOffsetY(int offsetY) |
设置文本 Y 偏移。 | offsetY:Y 方向偏移量。 |
void |
int getTextOffsetY() |
获取文本 Y 偏移。 | 无 | int |
WidgetKit 通用布局接口
| 接口 | 说明 | 参数 | 返回值 |
|---|---|---|---|
void setLayoutRatio(int ratio) |
设置布局比例值。用于比例布局。 | ratio:空间占比权重。 |
void |
int getLayoutRatio() const |
获取布局比例值。 | 无 | int |
void setWidthPolicy(LayoutSizePolicy policy) |
设置宽度策略。常用值为 UIG_SIZE_AUTO、UIG_SIZE_FILL、UIG_SIZE_FIXED。 |
policy:宽度策略枚举。 |
void |
LayoutSizePolicy getWidthPolicy() const |
获取宽度策略。 | 无 | LayoutSizePolicy |
void setHeightPolicy(LayoutSizePolicy policy) |
设置高度策略。 | policy:高度策略枚举。 |
void |
LayoutSizePolicy getHeightPolicy() const |
获取高度策略。 | 无 | LayoutSizePolicy |
void setAbsoluteLayout(bool absoluteLayout) |
设置是否使用绝对布局。 | absoluteLayout:是否启用绝对布局。 |
void |
bool getAbsoluteLayout() const |
获取是否使用绝对布局。 | 无 | bool |
void setAbsoluteDock(DockLayoutType hor, DockLayoutType ver, int offsetX = 0, int offsetY = 0) |
设置绝对停靠位置和偏移。 | hor:水平停靠;ver:垂直停靠;offsetX/offsetY:偏移量。 |
void |
void getAbsoluteDock(DockLayoutType& hor, DockLayoutType& ver, int& offsetX, int& offsetY) const |
获取绝对停靠位置和偏移。 | hor/ver/offsetX/offsetY:输出停靠与偏移。 |
void |
void setOpacity(int alpha) |
设置控件透明度,范围 0-255。 |
alpha:透明度值。 |
void |
int getOpacity() const |
获取控件透明度。 | 无 | int |
void resizeWidget() |
根据 WidgetKit 布局数据重新计算控件尺寸和位置。 | 无 | void |
信号
| 信号 | 说明 | 参数 | 返回值 |
|---|---|---|---|
void enterSignal() |
鼠标进入按钮区域时触发。 | 无 | void |
void leaveSignal() |
鼠标离开按钮区域时触发。 | 无 | void |
void clicked(bool checked = false) |
Qt QPushButton 标准点击信号。 |
checked:按钮选中状态。 |
void |
主题样式建议
按钮背景、文字、图标颜色建议放到主题中维护。业务代码只负责设置文本、图标路径、状态和动作,避免把颜色、圆角、边框写散在页面逻辑里。
使用建议
- 普通业务按钮优先通过
setThemeName(...)绑定主题,不建议在页面代码里硬编码颜色。 - 图标按钮如果不需要背景,使用
drawBackground: false或setDrawBackground(false)。 - SVG 图标需要统一适配主题色时,设置
iconUseColor: true和iconColor。 - 页面中主按钮数量应保持克制,避免多个强强调按钮同时出现。