动态创建组件

在轻语言网页开发中,除了通过可视化设计页面外,也可以通过代码的方式创建组件并将其添加到页面中。

创建一个简单的按钮

组件的创建语法与安卓、视窗的创建方式基本一样。

代码示例:

事件 页面加载完毕()
    ' 动态创建组件与安卓、视窗方式基本一样
    ' 这里我们演示创建一个按钮,和循环创建10个按钮添加到滚动框中
    ' 注意:如果可视化设计器窗口中已经添加了名称为“按钮1”的按钮组件,那么在代码中动态创建按钮时
    ' 就不能再取名为“按钮1”
    变量 局_按钮 = 创建 按钮()
    ' 这里需与安卓、视窗的标题区分,网站组件的标题为文本属性
    局_按钮.文本 = "我是动态创建的按钮" 
    ' 设置当前创建的按钮布局位置,参数值可以为整数、或文本,当设置含有单位的参数值时,必须为文本类型
    ' 例如:下方的10,20 不带单位时,默认为px像素,如果设置单位则需要使用双引号包裹作为文本参数值设置
    局_按钮.移动(10,20,"50%","60px")
    ' 为按钮设置被单击事件,当按钮在页面中被用户单击后,系统反馈给我们(开发者)
    局_按钮.置被单击回调((源对象,源事件)=>{
        弹出提示("动态创建的按钮被单击")
        标签1.文本 = "动态创建的按钮被单击"
    })
    ' 将按钮添加到根布局或任意其它布局中
    根布局.添加组件(局_按钮)
    
    ' 除了上述方式外,我们也可以将创建组件的代码放在一个函数中,然后在合适的地方调用函数
    动态批量创建组件()
结束 事件

动态批量创建多个组件

在实际开发时,我们往往可能会遇到批量创建组件的场景,在轻语言网页开发中实现起来也很简单、代码示例:

事件 页面加载完毕()
    动态批量创建组件()
结束 事件

函数 动态批量创建组件()
    垂直滚动框1.边框圆角 = "4px"
    变量循环(i = 0,10,1)
        变量 局_按钮对象 = 创建 按钮()
        ' 注意:任何添加到父布局为非绝对布局的容器中时,都需要设置定位为空或适合父布局的定位
        ' 设置为指定定位后,由父布局处理子组件的定位模式,这里我们设置其子组件的定位为空
        局_按钮对象.定位 = ""
        ' 设置一下宽高尺寸
        局_按钮对象.宽度 = "100%"
        局_按钮对象.内边距 = "10px"
        局_按钮对象.外边距底 = "10px"
        ' 设置不同索引的颜色背景
        如果(i % 2 == 0)
            局_按钮对象.背景颜色 = "#18b165"
        结束 如果
        ' 设置其它属性
        局_按钮对象.文本 = "动态按钮" + i
        局_按钮对象.置被单击回调((源对象,事件源)=>{
            标签1.文本 = "垂直滚动框中按钮被单击,索引:" + i
        })
        垂直滚动框1.添加组件(局_按钮对象)
    结束循环
结束 函数

更多演示请参考官方安装包中的例程。