构建固件和导入到JS

Obj 类由 lv 模块提供：

import { Obj } from 'lv'

简介

基础对象，所有控件的基类

Obj 对应 LVGL 的 lv_obj_t，提供位置尺寸、父子层级、样式、事件、滚动、布局等全部控件的公共能力。所有控件类（Btn、Label、Slider 等）都继承自 Obj，因此本页描述的属性、方法和事件对所有控件均可用。

继承自 EventEmitter，提供 on()/off() 等事件监听方法。

示例：

import * as lv from "lv"

const obj = new lv.Obj(lv.screen())
obj.setSize(100, 50)
obj.center()

事件

监听 LVGL 事件前，需要先调用 enableEvent() 启用对应事件，然后通过 on() 监听：

const btn = new lv.Btn(lv.screen())
btn.enableEvent("clicked")
btn.on("clicked", (event, obj)=> {
    console.log("button clicked")
})

事件回调签名为 callback(event:string, obj:Obj, param:any)，param 仅部分事件携带（如 gesture 事件携带手势方向字符串）。

常用事件名：

事件名	说明
clicked	点击（按下后释放）
pressed	按下
pressing	按住中（持续触发）
press-lost	按下状态丢失（如滑出对象）
short-clicked	短击
long-pressed	长按
long-pressed-repeat	长按重复触发
released	释放
focused / defocused	获得 / 失去焦点
value-changed	值改变（Slider、Checkbox 等）
ready / cancel	就绪 / 取消（如 TextArea、Roller）
gesture	手势，param 为方向："top"/"bottom"/"left"/"right"
scroll-begin / scroll / scroll-end	滚动开始 / 滚动中 / 滚动结束
create / delete	对象创建 / 销毁
all	全部事件

类属性

属性 state

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_state 的封装， 具体用法请参考 LVGL文档

属性 eventCount

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_event_count 的封装， 具体用法请参考 LVGL文档

属性 x

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_x, lv_obj_set_x 的封装， 具体用法请参考 LVGL文档

属性 y

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_y, lv_obj_set_y 的封装， 具体用法请参考 LVGL文档

属性 width

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_width, lv_obj_set_width 的封装， 具体用法请参考 LVGL文档

属性 height

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_height, lv_obj_set_height 的封装， 具体用法请参考 LVGL文档

属性 contentWidth

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_content_width, lv_obj_set_content_width 的封装， 具体用法请参考 LVGL文档

属性 contentHeight

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_content_height, lv_obj_set_content_height 的封装， 具体用法请参考 LVGL文档

属性 layout

类型: number

访问: 只写

该属性是对 LVGL C API lv_obj_set_layout 的封装， 具体用法请参考 LVGL文档

属性 align

类型: LV-CONST

访问: 只写

该属性是对 LVGL C API lv_obj_set_align 的封装， 具体用法请参考 LVGL文档

属性 xAligned

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_x_aligned 的封装， 具体用法请参考 LVGL文档

属性 yAligned

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_y_aligned 的封装， 具体用法请参考 LVGL文档

属性 selfWidth

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_self_width 的封装， 具体用法请参考 LVGL文档

属性 selfHeight

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_self_height 的封装， 具体用法请参考 LVGL文档

属性 extClickArea

类型: number

访问: 只写

该属性是对 LVGL C API lv_obj_set_ext_click_area 的封装， 具体用法请参考 LVGL文档

属性 scrollbarMode

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_scrollbar_mode, lv_obj_set_scrollbar_mode 的封装， 具体用法请参考 LVGL文档

属性 scrollDir

类型: LV-CONST

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_scroll_dir, lv_obj_set_scroll_dir 的封装， 具体用法请参考 LVGL文档

属性 scrollSnapX

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_scroll_snap_x, lv_obj_set_scroll_snap_x 的封装， 具体用法请参考 LVGL文档

属性 scrollSnapY

类型: number

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_scroll_snap_y, lv_obj_set_scroll_snap_y 的封装， 具体用法请参考 LVGL文档

属性 scrollX

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_scroll_x 的封装， 具体用法请参考 LVGL文档

属性 scrollY

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_scroll_y 的封装， 具体用法请参考 LVGL文档

属性 scrollTop

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_scroll_top 的封装， 具体用法请参考 LVGL文档

属性 scrollBottom

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_scroll_bottom 的封装， 具体用法请参考 LVGL文档

属性 scrollLeft

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_scroll_left 的封装， 具体用法请参考 LVGL文档

属性 scrollRight

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_scroll_right 的封装， 具体用法请参考 LVGL文档

属性 parent

类型: obj

访问: 可读, 可写

该属性是对 LVGL C API lv_obj_get_parent, lv_obj_set_parent 的封装， 具体用法请参考 LVGL文档

属性 screen

类型: obj

访问: 只读

该属性是对 LVGL C API lv_obj_get_screen 的封装， 具体用法请参考 LVGL文档

属性 childCount

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_child_count 的封装， 具体用法请参考 LVGL文档

属性 index

类型: number

访问: 只读

该属性是对 LVGL C API lv_obj_get_index 的封装， 具体用法请参考 LVGL文档

属性 flexFlow

类型: LV-CONST

访问: 只写

该属性是对 LVGL C API lv_obj_set_flex_flow 的封装， 具体用法请参考 LVGL文档

属性 flexGrow

类型: number

访问: 只写

该属性是对 LVGL C API lv_obj_set_flex_grow 的封装， 具体用法请参考 LVGL文档

类方法

方法 child

原型: child (index:number)

获取指定序号的子对象

等同于 getChild()。

参数:

• index

  类型number

  参数说明子对象序号，负数表示从末尾倒数（-1 为最后一个）

返回值:

类型Obj, null

说明子对象，序号超出范围时返回 null

---

方法 animation

原型: animation (propName:string, valueFrom:number, valueTo:number, duration:number, ease:string="linear")

创建一个属性动画对象

对对象的指定属性（x/y/width/height）在指定时长内从起始值过渡到目标值，返回 Animation 对象，调用其 start() 开始播放。

示例：

const obj = new lv.Obj(lv.screen())

// 1 秒内将 x 从 0 过渡到 100
const anim = obj.animation("x", 0, 100, 1000, "inOutQuad")
anim.on("stop", ()=> console.log("done"))
anim.start()

缓动名称使用 animator 模块的 tween 缓动函数（如 "linear"、"inQuad"、"outBounce"），曲线效果可参考 缓动函数速查表。

参数:

• propName

  类型string

  参数说明属性名："x"、"y"、"width"、"height"

• valueFrom

  类型number

  参数说明起始值

• valueTo

  类型number

  参数说明目标值

• duration

  类型number

  参数说明过渡时长（毫秒）

• ease

  类型string

  默认值"linear"

  参数说明缓动函数名称

异常:

• 不支持的属性名
• 不支持的缓动函数名

返回值:

类型Animation

说明动画对象

---

方法 show

原型: show ()

显示对象

等同于 Obj.removeFlag("hidden")

返回值:

类型undefined

---

方法 hide

原型: hide ()

隐藏对象

等同于 Obj.addFlag("hidden")

返回值:

类型undefined

---

方法 setVisible

原型: setVisible (visible:boolean)

设置对象的可见状态

参数:

• visible

  类型boolean

  参数说明true:显示, false:隐藏

返回值:

类型undefined

---

方法 addFlag

原型: addFlag ()

该方法是对 LVGL C API lv_obj_add_flag 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 removeFlag

原型: removeFlag ()

该方法是对 LVGL C API lv_obj_remove_flag 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 updateFlag

原型: updateFlag ()

该方法是对 LVGL C API lv_obj_update_flag 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 addState

原型: addState ()

该方法是对 LVGL C API lv_obj_add_state 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 removeState

原型: removeState ()

该方法是对 LVGL C API lv_obj_remove_state 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 setState

原型: setState ()

该方法是对 LVGL C API lv_obj_set_state 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 hasFlag

原型: hasFlag ()

该方法是对 LVGL C API lv_obj_has_flag 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 hasFlagAny

原型: hasFlagAny ()

该方法是对 LVGL C API lv_obj_has_flag_any 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 hasState

原型: hasState ()

该方法是对 LVGL C API lv_obj_has_state 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 allocateSpecAttr

原型: allocateSpecAttr ()

该方法是对 LVGL C API lv_obj_allocate_spec_attr 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 isValid

原型: isValid ()

该方法是对 LVGL C API lv_obj_is_valid 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 classInitObj

原型: classInitObj ()

该方法是对 LVGL C API lv_obj_class_init_obj 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 isEditable

原型: isEditable ()

该方法是对 LVGL C API lv_obj_is_editable 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 isGroupDef

原型: isGroupDef ()

该方法是对 LVGL C API lv_obj_is_group_def 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 calculateExtDrawSize

原型: calculateExtDrawSize ()

该方法是对 LVGL C API lv_obj_calculate_ext_draw_size 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 refreshExtDrawSize

原型: refreshExtDrawSize ()

该方法是对 LVGL C API lv_obj_refresh_ext_draw_size 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 removeEvent

原型: removeEvent ()

该方法是对 LVGL C API lv_obj_remove_event 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 setPos

原型: setPos ()

该方法是对 LVGL C API lv_obj_set_pos 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 setSize

原型: setSize ()

该方法是对 LVGL C API lv_obj_set_size 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 refrSize

原型: refrSize ()

该方法是对 LVGL C API lv_obj_refr_size 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 isLayoutPositioned

原型: isLayoutPositioned ()

该方法是对 LVGL C API lv_obj_is_layout_positioned 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 markLayoutAsDirty

原型: markLayoutAsDirty ()

该方法是对 LVGL C API lv_obj_mark_layout_as_dirty 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 updateLayout

原型: updateLayout ()

该方法是对 LVGL C API lv_obj_update_layout 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 alignTo

原型: alignTo ()

该方法是对 LVGL C API lv_obj_align_to 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 refreshSelfSize

原型: refreshSelfSize ()

该方法是对 LVGL C API lv_obj_refresh_self_size 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 refrPos

原型: refrPos ()

该方法是对 LVGL C API lv_obj_refr_pos 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 moveTo

原型: moveTo ()

该方法是对 LVGL C API lv_obj_move_to 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 moveChildrenBy

原型: moveChildrenBy ()

该方法是对 LVGL C API lv_obj_move_children_by 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 invalidate

原型: invalidate ()

该方法是对 LVGL C API lv_obj_invalidate 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 isVisible

原型: isVisible ()

该方法是对 LVGL C API lv_obj_is_visible 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 scrollBy

原型: scrollBy ()

该方法是对 LVGL C API lv_obj_scroll_by 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 scrollByBounded

原型: scrollByBounded ()

该方法是对 LVGL C API lv_obj_scroll_by_bounded 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 scrollTo

原型: scrollTo ()

该方法是对 LVGL C API lv_obj_scroll_to 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 scrollToX

原型: scrollToX ()

该方法是对 LVGL C API lv_obj_scroll_to_x 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 scrollToY

原型: scrollToY ()

该方法是对 LVGL C API lv_obj_scroll_to_y 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 scrollToView

原型: scrollToView ()

该方法是对 LVGL C API lv_obj_scroll_to_view 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 scrollToViewRecursive

原型: scrollToViewRecursive ()

该方法是对 LVGL C API lv_obj_scroll_to_view_recursive 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 isScrolling

原型: isScrolling ()

该方法是对 LVGL C API lv_obj_is_scrolling 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 updateSnap

原型: updateSnap ()

该方法是对 LVGL C API lv_obj_update_snap 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 scrollbarInvalidate

原型: scrollbarInvalidate ()

该方法是对 LVGL C API lv_obj_scrollbar_invalidate 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 readjustScroll

原型: readjustScroll ()

该方法是对 LVGL C API lv_obj_readjust_scroll 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 removeStyleAll

原型: removeStyleAll ()

该方法是对 LVGL C API lv_obj_remove_style_all 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 fadeIn

原型: fadeIn ()

该方法是对 LVGL C API lv_obj_fade_in 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 fadeOut

原型: fadeOut ()

该方法是对 LVGL C API lv_obj_fade_out 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 delete

原型: delete ()

该方法是对 LVGL C API lv_obj_delete 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 clean

原型: clean ()

该方法是对 LVGL C API lv_obj_clean 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 deleteDelayed

原型: deleteDelayed ()

该方法是对 LVGL C API lv_obj_delete_delayed 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 deleteAsync

原型: deleteAsync ()

该方法是对 LVGL C API lv_obj_delete_async 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 swap

原型: swap ()

该方法是对 LVGL C API lv_obj_swap 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 moveToIndex

原型: moveToIndex ()

该方法是对 LVGL C API lv_obj_move_to_index 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 getChild

原型: getChild ()

该方法是对 LVGL C API lv_obj_get_child 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 getSibling

原型: getSibling ()

该方法是对 LVGL C API lv_obj_get_sibling 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 dumpTree

原型: dumpTree ()

该方法是对 LVGL C API lv_obj_dump_tree 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 setFlexAlign

原型: setFlexAlign ()

该方法是对 LVGL C API lv_obj_set_flex_align 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 setGridAlign

原型: setGridAlign ()

该方法是对 LVGL C API lv_obj_set_grid_align 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 setGridCell

原型: setGridCell ()

该方法是对 LVGL C API lv_obj_set_grid_cell 的封装，具体用法请参考 LVGL文档

返回值:

undefined

---

方法 enableEvent

原型: enableEvent (event:string)

启用一个 LVGL 事件

启用后可以通过 on() 监听该事件，可用的事件名见 Obj 类文档中的事件表。

示例：

btn.enableEvent("clicked")
btn.on("clicked", (event, obj)=> console.log("clicked"))

参数:

• event

  类型string

  参数说明事件名，如 "clicked"、"value-changed"

返回值:

类型undefined

---

方法 style

原型: style (styleName:string)

返回样式的值

如果样式不存在，抛出异常

可用的样式参考

参数:

• styleName

  类型string

  参数说明样式名称

返回值:

类型number, string

---

方法 setStyle

原型: setStyle (style:string|object, value:number|string)

设置样式

如果样式不存在，抛出异常。

可用的样式参考

import * as lv from 'lv'

let obj = lv.Obj( lv.screen() )

// 对象类型参数，设置多个样式
obj.setStyle({
    "border-width": 1 ,                 // 边线宽
    "border-color": lv.color(255,0,0) , // 边线颜色
    "border-opa": 100255 ,              // 边线不透明度
})
// 设置单个样式
obj.setStyle("width","100%")

参数:

• style

  类型string, object

  参数说明样式名称或多个样式的对象

• value

  类型number, string

  参数说明样式值，当第一个参数是对象的时候，此参数无效

返回值:

类型number, string

---

方法 center

原型: center ()

将对象在父对象中居中对齐

等同于 alignTo("center", 0, 0)。

返回值:

类型undefined

贡献者: alee

上一页LVGL(图形界面库)

下一页Animation(动画)