图片按钮 (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)