按钮控件

按钮控件

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_NORMALUIG_HOTUIG_PRESSEDUIG_DISABLEUIG_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_AUTOUIG_SIZE_FILLUIG_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: falsesetDrawBackground(false)
  • SVG 图标需要统一适配主题色时,设置 iconUseColor: trueiconColor
  • 页面中主按钮数量应保持克制,避免多个强强调按钮同时出现。