图片按钮

图片按钮和按钮控件类似，但是图片按钮可以设置多个图片，根据不同状态显示不同图片。

预览

属性

PropertyDescription
Text文本
Middle Released Image中间释放后图片
Middle Pressed Image中间按下时图片
Middle Checked Released Image中间选中释放后图片
Middle Checked Pressed Image中间选中按下时图片
Left Released Image左侧释放后图片
Left Pressed Image左侧按下时图片
Left Checked Released Image左侧选中释放后图片
Left Checked Pressed Image左侧选中按下时图片
Right Released Image右侧释放后图片
Right Pressed Image右侧按下时图片
Right Checked Released Image右侧选中释放后图片
Right Checked Pressed Image右侧选中按下时图片

图片按钮支持设置按键的左、中、右三个部分的图片，中间部分的图片将根据对象的宽度平铺显示，如果没有设置左、右部分的图片，则中间部分的图片将填充整个控件。

提示

  • 图片按钮的高度将根据图片的高度进行调整，在调用lv_imgbtn_set_src、lv_imgbtn_set_state时，和触发LV_EVENT_PRESSED、LV_EVENT_RELEASED、LV_EVENT_PRESS_LOST事件后，会根据中间图片的高度调整控件的高度。
  • 当调用lv_imgbtn_set_src时，如果没有设置中间部分，那么设置了左、右部分的图片将会被忽略。

样式

StylePartDescription
Image RecolorMain图片遮罩颜色
Image Recolor OpaqueMain图片遮罩颜色，不透明
OpaqueMain图片透明度

控件支持的绑定属性

PropertyTypeDescriptionSync Mode
Textchar *OneWayModelToView
ToogleboolOneWayModelToView

多国语言

支持设置多国语言的属性：

  • Text

使用

将一个按钮图片剪切分成三部分。

为控件分别设置左、中、右三个部分释放后的图片，复制拷贝图片按钮控件，并修改其宽度，中间部分的图片会根据控件的宽度进行平铺显示。

为控件增加按下状态的图片，在按下时，图片会切换为按下状态的图片。

增加一个按钮，为其增加Clicked事件，目标对象为图片按钮，启用伸缩动画。 为图片按钮增加外边框样式，运行后，点击按钮，图片按钮的尺寸会慢慢变化，当按下图片按钮时，图片按钮的高度会自动调整为图片的高度。

图片按钮

放置图片按钮控件后选中控件，点击+号设置图片。

在样式处更改状态为PRESSED，并修改遮罩颜色从而实现按下按钮时的按钮变暗的点击效果。

仿真效果，按下时图片变暗，松开恢复正常。