按钮 (Button)
::: hljs-center
:::
按钮控件，这个就不用多说了，界面的基础控件之一。
## 示例代码
```lua
-- 按键回调函数
event_handler = function(obj, event)
if event == lvgl.EVENT_CLICKED then
print("Clicked\n")
elseif event == lvgl.EVENT_VALUE_CHANGED then
print("Toggled\n")
end
end
-- 按键1
btn1 = lvgl.btn_create(lvgl.scr_act(), nil)
lvgl.obj_set_event_cb(btn1, event_handler)
lvgl.obj_align(btn1, nil, lvgl.ALIGN_CENTER, 0, -40)
-- 按键1 的文字
label = lvgl.label_create(btn1, nil)
lvgl.label_set_text(label, "Button")
-- 按键2
btn2 = lvgl.btn_create(lvgl.scr_act(), nil)
lvgl.obj_set_event_cb(btn2, event_handler)
lvgl.obj_align(btn2, nil, lvgl.ALIGN_CENTER, 0, 40)
lvgl.btn_set_checkable(btn2, true)
lvgl.btn_toggle(btn2)
lvgl.btn_set_fit2(btn2, lvgl.FIT_NONE, lvgl.FIT_TIGHT)
-- 按键2 的文字
label = lvgl.label_create(btn2, nil)
lvgl.label_set_text(label, "Toggled")
```
## 创建
按钮创建函数是 `lvgl.btn_create`，这里的按钮是不带文字的，文字实际上是通过在按钮内部创建标签实现的，首先我们来创建个按钮来看看:
```lua
lvgl.btn_create(lvgl.scr_act(), nil)
```
## 切换按钮
切换按钮就是点击之后会切换自己的状态，可以通过自身显示表示 `开关` 状态，也叫 `开关按钮`。看起来差别比较大，但是切换按钮并不是独立的一个控件，只是普通按钮设置了 `checkable` 属性。
```lua
lvgl.btn_set_checkable(btn, true)
```
::: hljs-center
:::
## 自适应
按钮控件继承自容器，可以使用设置容器特有的一些属性，比如 `fit` 这部分可以参考容器的使用，这部分就不在这里展开了，这里可以看看效果，`lvgl.FIT_TIGHT` 就是扩展到最大，我们现在可以创建一个按钮，让它横向填充满屏幕。
```lua
lvgl.btn_set_fit2(btn2, lvgl.FIT_MAX, lvgl.FIT_NONE)
```
::: hljs-center
:::
## 状态
按钮的样式可以通过设置风格改变，有关风格样式的说明可以参考 `样式` 章节，按钮有几种状态:
```lua
lvgl.BTN_STATE_RELEASED -- 正常
lvgl.BTN_STATE_PRESSED -- 按下
lvgl.BTN_STATE_DISABLED -- 禁用
lvgl.BTN_STATE_CHECKED_RELEASED -- 切换按钮 释放
lvgl.BTN_STATE_CHECKED_PRESSED -- 切换按钮 按下
lvgl.BTN_STATE_CHECKED_DISABLED -- 切换按钮 禁用
```
简单看，一个按钮就三种状态，正常，按下，禁用。可以手动设置按钮的当前状态，同时也可以单独对每种状态进行风格设置。我们可以把这些状态默认样式都打印一遍，看看效果。
```lua
function addBtn(y, s)
local btn = lvgl.btn_create(lvgl.scr_act(), nil)
lvgl.obj_align(btn, nil, lvgl.ALIGN_CENTER, 0, y)
local label = lvgl.label_create(btn, nil)
lvgl.label_set_text(label, s)
lvgl.btn_set_state(btn, lvgl[s])
lvgl.btn_set_fit2(btn, lvgl.FIT_TIGHT, lvgl.FIT_NONE)
end
addBtn(-100, "BTN_STATE_RELEASED") -- 正常
addBtn(-50 , "BTN_STATE_PRESSED") -- 按下
addBtn(0 , "BTN_STATE_DISABLED") -- 禁用
addBtn(50 , "BTN_STATE_CHECKED_RELEASED") -- 切换按钮 释放
addBtn(100 , "BTN_STATE_CHECKED_PRESSED") -- 切换按钮 按下
addBtn(150 , "BTN_STATE_CHECKED_DISABLED") -- 切换按钮 禁用
```
::: hljs-center
:::
## 事件
按键的基本用途就是响应事件了，可以通过对按键绑定回调函数，这和其他控件的方式是一样的。点击事件并不是按钮独有的，几乎所有的控件都可以响应点击事件，按钮和它们不同的地方在于点击之后会切换不同状态。`示例代码`描述的就是事件响应，我们来看看效果:
::: hljs-center
:::
## API
### lvgl.btn_create
|调用|lvgl.btn_create(par, copy)|
|-|-|
|功能|创建一个按钮对象|
|返回|指向创建的按钮的指针|
|参数||
|par|指向对象的指针, 它将是新按钮的父对象|
|copy|指向按钮对象的指针, 如果不为 nil, 则将从其复制新对象|
### lvgl.btn_set_checkable
|调用|lvgl.btn_set_checkable(btn, tgl)|
|-|-|
|功能|启用切换状态。释放时, 按钮将切换当前状态。|
|参数||
|btn|指向按钮对象的指针|
|tgl|true：启用切换状态, false：禁用|
### lvgl.btn_set_state
|调用|lvgl.btn_set_state(btn, state)|
|-|-|
|功能|设置按钮的状态|
|参数||
|btn|指向按钮对象的指针|
|state|按钮的新状态|
||lvgl.BTN_STATE_RELEASED|
||lvgl.BTN_STATE_PRESSED|
||lvgl.BTN_STATE_CHECKED_RELEASED|
||lvgl.BTN_STATE_CHECKED_PRESSED|
||lvgl.BTN_STATE_DISABLED|
||lvgl.BTN_STATE_CHECKED_DISABLED|
### lvgl.btn_toggle
|调用|lvgl.btn_toggle(btn)|
|-|-|
|功能|切换按钮的状态(ON -> OFF, OFF -> ON)|
|参数||
|btn|指向按钮对象的指针|
### lvgl.btn_set_layout
|调用|lvgl.btn_set_layout(btn, layout)|
|-|-|
|功能|在按钮上设置布局|
|参数||
|btn|指向按钮对象的指针|
|layout|参考 layout 的布局|
### lvgl.btn_set_fit4
|调用|lvgl.btn_set_fit4(BTN, left, right, top, bottom)|
|-|-|
|功能|分别在所有四个方向上设置适配策略。|
|参数||
|btn|指向按钮对象的指针|
|left|左边的适配策略|
|right|右边的适配策略|
|top|上边的适配策略|
|bottom|下边的适配策略|
### lvgl.btn_set_fit2
|调用|lvgl.btn_set_fit2(btn, hor, ver)|
|-|-|
|功能|分别设置水平和垂直的适配策略。|
|参数||
|btn|指向按钮对象的指针|
|hor|水平的适配策略|
|ver|垂直的适配策略|
### lvgl.btn_set_fit
|调用|lvgl.btn_set_fit(btn, fit)|
|-|-|
|功能|设置四个方向上的适配策略。|
|参数||
|btn|指向按钮对象的指针|
|fit|四个方向的适配策略|
### lvgl.btn_get_state
|调用|lvgl.btn_get_state(btn)|
|-|-|
|功能|获取按钮的当前状态|
|返回|按钮当前的状态|
|参数||
|btn|指向按钮对象的指针|
### lvgl.btn_get_checkable
|调用|lvgl.btn_get_checkable(btn)|
|-|-|
|功能|获取按钮的切换启用属性|
|返回|true：启用检查, false：停用|
|参数||
|btn|指向按钮对象的指针|
### lvgl.btn_get_layout
|调用|lvgl.btn_get_layout(btn)|
|-|-|
|功能|获取按钮的布局|
|返回|按钮的布局|
|参数||
|btn|指向按钮对象的指针|
### lvgl.btn_get_fit_left
|调用|lvgl.btn_get_fit_left(btn)|
|-|-|
|功能|获取按钮左边的适配策略|
|返回|按钮左边的适配策略|
|参数||
|btn|指向按钮对象的指针|
### lvgl.btn_get_fit_right
|调用|lvgl.btn_get_fit_right(btn)|
|-|-|
|功能|获取按钮右边的适配策略|
|返回|按钮右边的适配策略|
|参数||
|btn|指向按钮对象的指针|
### lvgl.btn_get_fit_top
|调用|lvgl.btn_get_fit_top(btn)|
|-|-|
|功能|获取按钮上边的适配策略|
|返回|按钮上边的适配策略|
|参数||
|btn|指向按钮对象的指针|
### lvgl.btn_get_fit_bottom
|调用|lvgl.btn_get_fit_bottom(btn)|
|-|-|
|功能|获取按钮下边的适配策略|
|返回|按钮下边的适配策略|
|参数||
|btn|指向按钮对象的指针|
[参考链接(C语言)](https://docs.lvgl.io/7.11/widgets/btn.html)