动态组件

有动就有静。静态组件(这是我自己用的一个概念,方便理解,实际开发环境中并没有这个称呼),就是我们在组件设计界面手动从左侧组件面板拖入工作面板,显示在组件列表中的,可以在组件属性面板对他的属性进行手动修改。

动态组件,是在逻辑设计界面,使用代码块来生成的,只有在调试或安装运行时可见的组件,他不会出现在设计界面的组件列表里面。

如何生成动态组件?

要生成动态组件,需要有两个参数,一个是新组件的父容器,一个是新组件的类型。

新组件要有个父容器,就是要把它显示在哪里?也就是说,必须是容器类的组件,才可以生成子组件。所以动态组件块的位置,只会出现在容器类组件抽屉里面。

何为容器类组件,就是比如屏幕、水平/垂直布局、水平/垂直滚动布局、表格布局、层叠布局,画布、地图等组件,可以生成相应的子组件。

比如屏幕1的动态组件块位置,非常简单,就一个积木块。

2020-12-31_135858

其他容器类组件下都有这样的创建块。

点击创建右边的下拉框,就可以选择要生成的新组件的类型(仅支持生成可视化组件)。

如何设置新组件的属性?

只要配合任意组件里面的积木块,就可以设置新组件的属性。

比如,我们需要生成10个按钮,每个按钮的文本就是他的编号,颜色设为随机,可以这样用:

2020-12-31_141222

错误用法:

2020-12-31_141326

如何获取/引用组件

上面的例子中,我们把新组件保存在一个局部变量中了,设置完属性后,后续操作那个局部变量就不管用了。如果还想操作这个组件怎么办?

1.是可以在创建时保存在一个全局变量中,但是如果创建很多组件,就要创建很多全局变量,这样动态组件的优点就荡然无存了。

2.是保存在一个列表中,但是需要知道组件在列表中的位置才能取出。

3.是保存在字典中,给每个组件起不重复的名字作为键名,组件本身作为键值。使用时通过键名取出组件。

2021-01-02_114008

4.是使用设置组件名称块,通过屏幕抽屉下的获取组件名称块来获取组件。

2021-01-02_114028

如何添加事件?

新组件生成了,如何与用户交互呢?可以响应用户的点击、按压等事件吗?有两个方法:

1 是对某一类组件使用任意组件里面的通用事件,比如:

2020-12-31_142753

这样的缺点是对屏幕上所有的同类的组件都适用这个事件,如果需要精确到某个或某几个就需要在事件中进行判断。或者在创建组件时,设置他的扩展属性,然后通过扩展属性值进行区分。

2 是对单个组件的某事件绑定回调函数:

2020-12-31_143340

还可以删除绑定的回调函数:

2020-12-31_143713

如何删除动态组件?

有些组件功能结束了,可以将它删除:

2020-12-31_143938

自删除功能不仅适用于动态组件,手动拖入的静态组件也可以使用。

如果他是个容器类组件,使用自删除后,他本身连同其内部的子组件也会一起被删除。

如果希望只是删除他的子组件,可以使用这个清空积木块:

2020-12-31_144310

举个例子1:国际象棋棋盘

我们要在屏幕上显示8行8列共64个标签,做成国际象棋棋盘样式。

这个可以通过设计界面拖入64个标签,并分别设置宽高颜色并设置点击事件来完成,但是比较累,比较傻。

blocks-20201231_152335

举个例子2:成绩排行榜

待续

举个例子3:模仿微信聊天界面

待续