Lua 应用开发LVGL控件

Object 基础对象

所有控件的基类:创建、属性、方法与事件

所有控件的基类。

创建

local obj = lvgl.Object(parent, {
  w = 100, h = 60,
  align = { type = lvgl.ALIGN.CENTER }
})

属性(obj:set{} / 创建时传入)

属性类型说明
x, yinteger坐标
w, hinteger尺寸。lvgl.SIZE_CONTENT 自适应
alignenum / tablelvgl.ALIGN.* 或 { type, x_ofs, y_ofs }
bg_colorinteger背景色 0xRRGGBB
bg_opainteger背景不透明度 0–255
bg_img_srcstring背景图路径
radiusinteger圆角。lvgl.RADIUS_CIRCLE 满圆角
border_widthinteger边框宽度
border_colorinteger边框颜色
outline_widthinteger轮廓宽度
outline_colorinteger轮廓颜色
outline_padinteger轮廓间距
shadow_widthinteger阴影宽度
shadow_colorinteger阴影颜色
shadow_opainteger阴影不透明度
shadow_ofs_x, shadow_ofs_yinteger阴影偏移
opainteger整体不透明度 0–255
pad_allinteger四方向内边距
pad_top, pad_bottom, pad_left, pad_rightinteger单方向内边距
pad_row, pad_columninteger行/列间距(Flex/Grid)
text_colorinteger文字颜色
transform_angleinteger旋转角度(单位 0.1°,450 = 45°)
transform_zoominteger缩放(256 = 1x,512 = 2x)
clip_cornerboolean裁剪圆角溢出
blend_modeinteger混合模式
hiddenboolean隐藏
scrollableboolean可滚动
flag_scrollableboolean滚动标志开关

方法

方法说明
Anim / anim创建动画
add_flag添加标志位
add_state添加状态
add_style添加样式
align_to相对于其他对象对齐
center将对象居中
clean删除所有子对象
clear_flag清除标志
clear_state清除状态
delete删除对象及其子对象
get_child获取指定索引的子对象
get_child_cnt获取子对象数量
get_coords获取绘制区域坐标
get_parent获取父对象
get_pos获取实际位置
get_screen返回所属屏幕对象
get_state获取当前状态值
indev_search根据坐标查找命中对象
invalidate标记对象重绘
is_editable判断是否可编辑
is_group_def判断是否为焦点组默认对象
is_layout_positioned判断是否参与布局定位
is_scrolling判断是否正在滚动
is_visible判断是否可见
mark_layout_as_dirty标记布局需重新计算
onPressed绑定按下事件回调
onClicked绑定点击事件回调
onevent注册指定事件回调
parent获取/设置父对象
readjust_scroll重新调整滚动位置
remove_all_anim移除所有动画
remove_style移除指定样式
remove_style_all移除所有样式
scroll_by按偏移滚动
scroll_by_bounded有边界的滚动
scroll_by_raw原始滚动(无动画)
scroll_to滚动到指定坐标
scroll_to_view滚动到当前可见区域
scroll_to_view_recursive递归滚动到可见区域
scrollbar_invalidate刷新滚动条显示
set批量设置属性
set_flex_align设置 Flex 对齐方式
set_flex_flow设置 Flex 布局方向
set_flex_grow设置 Flex 伸展比例
set_parent设置父对象
set_style批量设置样式属性

示例

local obj = lvgl.Object(nil, {
  w = 200, h = 120,
  align = { type = lvgl.ALIGN.CENTER },
  bg_color = 0x00AAFF,
  radius = 8,
})

obj:onClicked(function
  print("Clicked!")
end)

obj:Anim {
  run = true,
  start_value = 0,
  end_value = 200,
  duration = 1000,
  exec_cb = function(obj, v)
    obj:set({ x = v })
  end
}

社区补充(洛汐文档库)

以下内容整理自洛汐文档库(https://docs.luoxe.cn/ )。各控件的专属补充已拆分到对应控件文档,本节只保留 Object 通用约定与跨控件内容。

创建语法

控件有两种等价写法:

local image1 = lvgl.Image(parent, { src = "asset/a.bin" })
local image2 = parent:Image { src = "asset/b.bin" }

所有控件都继承 Object:可在构造时传入属性,也可在创建后批量设置:

obj:set { x = 10, y = 20, hidden = false }

Object 属性(分类速查)

分类属性
几何x、y、w、h、align、min_width、max_width、min_height、max_height
背景bg_color、bg_opa、bg_img_src、bg_img_opa、bg_img_recolor、bg_img_recolor_opa、bg_img_tiled
边框border_width、border_color、border_opa、border_side、border_post
外轮廓outline_width、outline_color、outline_opa、outline_pad
阴影shadow_width、shadow_color、shadow_opa、shadow_ofs_x、shadow_ofs_y、shadow_spread
内边距pad_all、pad_top、pad_bottom、pad_left、pad_right、pad_row、pad_column、pad_gap
变换transform_zoom、transform_angle、transform_pivot_x、transform_pivot_y、translate_x、translate_y
文本text_color、text_opa、text_font、text_letter_space、text_line_space、text_decor、text_align
其他radius、opa、clip_corner、blend_mode、scrollbar_mode、scroll_snap_x、scroll_snap_y

其中上文属性表未列出的补充属性包括:min_width/max_width/min_height/max_height(尺寸约束)、bg_img_opa/bg_img_recolor/bg_img_recolor_opa/bg_img_tiled(背景图混合)、border_opa/border_side/border_post、outline_opa、shadow_spread、pad_gap、transform_pivot_x/transform_pivot_y(变换轴心)、translate_x/translate_y(平移)、text_opa/text_font/text_letter_space/text_line_space/text_decor/text_align(文本样式)、scrollbar_mode/scroll_snap_x/scroll_snap_y(滚动)。这些属性均可在构造时或 obj:set{} 中使用。

Object 方法(分类速查)

分类方法
生命周期delete、clean、get_parent、set_parent、get_child、get_child_cnt、get_screen
样式set_style、add_style、remove_style、remove_style_all
几何align_to、center、invalidate、get_coords、get_pos
状态get_state、add_flag、clear_flag、add_state、clear_state、is_visible
滚动scroll_to、scroll_by、scroll_by_bounded、scroll_by_raw、scroll_to_view、scroll_to_view_recursive、is_scrolling、readjust_scroll
布局set_flex_flow、set_flex_align、set_flex_grow、mark_layout_as_dirty、is_layout_positioned
事件onevent、onPressed、onClicked、indev_search
动画anim / Anim、remove_all_anim

事件示例

button:onClicked(function(obj, code)
  print("clicked", obj, code)
end)

button:onevent(lvgl.EVENT.PRESSED, function(obj, code)
  print("pressed", code)
end)

机型可用性

Xiaomi Smart Band 10 ProXiaomi Watch S4 41mm
✅✅

获取源代码

参考来源:官方 docs-lua / 洛汐文档库 https://docs.luoxe.cn/

大纲