图片按钮 (Imagebutton)
::: hljs-center
![image.png](https://cos.easydoc.net/71161452/files/ks8dvh16.png)
:::
图片按钮属于一个扩展控件,当一般按钮样式无法满足需求时,我们就可以使用图片按钮。
## 示例代码
```lua
--创建一个 Image
imgbtn = lvgl.imgbtn_create(lvgl.scr_act(), nil)
--设置 Image 的内容
lvgl.imgbtn_set_src(imgbtn, lvgl.BTN_STATE_RELEASED, "/lua/out.png")
lvgl.imgbtn_set_src(imgbtn, lvgl.BTN_STATE_PRESSED, "/lua/in.png")
--设置 Image 的位置
lvgl.obj_align(imgbtn, nil, lvgl.ALIGN_CENTER, 0, 0)
```
## 创建
通过 `lvgl.imgbtn_create` 函数可以创建图片按钮。
```lua
imgbtn = lvgl.imgbtn_create(lvgl.scr_act(), nil)
```
## 设置图片
可以分别设置图片按钮按下和抬起状态的图片显示。
```
lvgl.imgbtn_set_src(imgbtn, lvgl.BTN_STATE_RELEASED, "/lua/out.png")
lvgl.imgbtn_set_src(imgbtn, lvgl.BTN_STATE_PRESSED, "/lua/in.png")
```
::: hljs-center
![jdfw3.gif](https://cos.easydoc.net/71161452/files/ks8hsbr0.gif)
:::
## 图片属性
图片按钮可以可以把按钮当成图片使用一部分属性。例如可以使用透明度以及重新着色。
```lua
-- 设置图片透明度
lvgl.obj_set_style_local_image_opa(imgbtn, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 128)
```
可以看到按钮的显示效果变淡了:
::: hljs-center
![jdfw4.gif](https://cos.easydoc.net/71161452/files/ks8iugzx.gif)
:::
我们也可以让按钮发绿
```lua
lvgl.obj_set_style_local_image_recolor_opa(imgbtn, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 100)
lvgl.obj_set_style_local_image_recolor(imgbtn, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 0x00FF00)
```
::: hljs-center
![jdfw5.gif](https://cos.easydoc.net/71161452/files/ks8ixbq6.gif)
:::
## 事件
图片按钮触发回调函数的方式和普通按钮是一样的。
```lua
-- 按键回调函数
event_handler = function(obj, event)
if event == lvgl.EVENT_CLICKED then
print("Clicked\n")
end
end
-- 设置回调函数
lvgl.obj_set_event_cb(imgbtn, event_handler)
```
::: hljs-center
![jdfw6.gif](https://cos.easydoc.net/71161452/files/ks8j4rt6.gif)
:::
## API
`单独属于图片按钮的 API 并不多`
### lvgl.imgbtn_create
|调用|lvgl.imgbtn_create(par, copy)|
|-|-|
|功能|创建一个图片按钮对象|
|返回|指向创建的图片按钮的指针|
|参数||
|par|指向对象的指针, 它将是新图片按钮的父对象|
|copy|指向图片按钮对象的指针, 如果不为 nil, 则将从其复制新对象|
### lvgl.imgbtn_set_src
|调用|lvgl.imgbtn_set_src(par, status, path)|
|-|-|
|功能|设置图片按钮的图片|
|参数||
|par|指向对象的指针, 它将是新按钮的父对象|
|status|需要设置的按钮状态,参考按钮部分。|
|path|符号文件或者图片资源的路径|
[参考链接(C语言)](https://docs.lvgl.io/master/widgets/extra/imgbtn.html)