[DeviceOne开发]-do_LinearLayout组件使用技巧

Posted 2020-08-07 Jonh.Felix

一、摘要

今天跟大家主要来介绍一下DeviceOne中的do_linearlayout这个布局，在DeviceOne开发中，do_linearlayout这个布局是相当重要。

现在给大家来总结一下。

 

二、基本的总结

我们来看下这个linearlayout，做过原生开发的同学（android或者ios或者windows）可能对这个单词比较熟悉，没错，这个linearlayout在Deviceone中所要实现的效果跟原生里面是完全一样。

linearlayout这个布局有两种方式，一个是vertical（垂直布局），一个是horizontal（水平布局）。

vertical（垂直布局）：就是在这个布局里面的所有组件都是按照垂直的方式来排列的，也就是说，这个布局里面你在设置里面组件的x，y坐标是没有用的。举例：

从上图我们可以看出，在这个垂直布局里面，我放了一个button1，那么我在add一个button2的时候，我不需要去设置他的x，y坐标，他会直接放到button1下面的。这就是这个垂直布局的特性，而且我们可以将linearlayout的高度设置-1，会根据里面的组件大小来自动适应。

 

horizontal（水平布局）：水平布局正好跟上面的垂直布局相反，我想就不用多做解释了。

三、示例代码

var nf = sm("do_Notification");
var add = ui("addLinearLayout");
var linearlayout = ui("do_LinearLayout_1");
var i = 0;
add.on("touch", function() {
    // 插入到“第二个组件”下
    // add函数返回是新加ui的地址，
    // add 的参数1是表示加进来的ui在index.ui里的唯一标示，必须和index.ui其他view的id不一样
    var newui = linearlayout.add("added_ui_id" + i, "source://view/test.ui",
            "do_Button_1");
    // ui("added_ui_id" + i)===ui(newui)
 
    // label是新加进去来的ui文件里的一个子view,可以通过这种方式获取到子view的对象
    var label = ui(newui + ".do_Label_1");
    label.text = "我是add进来的" + i;
 
    newui = ui("added_ui_id" + i);
    newui.width = newui.width + 10 * i;
    i++;
 
});

 

四、实际用途

通过上面的分析，我想大家可能都知道该在什么地方来使用这个布局了。

例如：在某个App页面需要动态增加一些组件的时候，就可以使用这个组件了。