分组管理控件
本文主要介绍了在一些合适的场景下,通过使用 GROUP
控件来对一系列控件分组、统一管理,做到更优雅的代码实现。
针对如下场景进行举例说明,期待社区的朋友们挖掘更多使用场景
- 场景一:对一个矩形区域中的控件统一控制显示/隐藏,修改位置等
- 场景二:对一个矩形区域中的控件注册同样的点击事件,并扩大用户交互的点击区域
场景一:对一个矩形区域中的控件统一控制显示/隐藏,修改位置等
下图是「Holiday Calendar」小程序在模拟器中运行的截图。
拿界面中的一部分来举例。
这一部分界面包括两个 IMG
和一个 TEXT
控件,如果要对这整个区域进行隐藏,代码该如何实现?
import { createWidget, widget, prop } from '@zos/ui'
const img_icon_widget = createWidget(widget.IMG, {
// ...
})
const img_arrow_widget = createWidget(widget.IMG, {
// ...
})
const text_name_widget = createWidget(widget.TEXT, {
// ...
})
img_icon_widget.setProperty(prop.VISIBLE, false)
img_arrow_widget.setProperty(prop.VISIBLE, false)
text_name_widget.setProperty(prop.VISIBLE, false)
需要对这个区域中的每个控件都进行一次属性 prop.VISIBLE
的设置,这样的代码维护性不好,使用 GROUP
控件对代码进行改造。
import { createWidget, widget, prop } from '@zos/ui'
const group_widget = createWidget(widget.GROUP , {
// ...
})
const img_icon_widget = group_widget.createWidget(widget.IMG, {
// ...
})
const img_arrow_widget = group_widget.createWidget(widget.IMG, {
// ...
})
const text_name_widget = group_widget.createWidget(widget.TEXT, {
// ...
})
group_widget.setProperty(prop.VISIBLE, false)