必备基础

作为开发者，你必须要了解UI框架的一些基本底层逻辑，这可以帮助你更快的掌握UI的使用方法，避免在开发的阶段遇到无法理解的问题。

01.组件监听

由于绝大多数情况下，我们的程序都是在做大量的耗时任务，例如：模拟点击滑动等等。 所以，在UI框架的组件监听的设计上，所有的回调事件最终都在子线程中进行。 下面我以button举例说明:请关注js代码中的注释部分

<ui>
    <button text="开始运行" id="startRun"/>
</ui>

//找到按钮
let startBut = ui.id("startRun");
//开始操作
startBut.click((view) => {
    //注意:如果你开发过安卓,那么此处本应该是处于ui线程操作
    //但是我们将其放在了子线程中，所以此处的代码是处于子线程中执行的
    //于是我们可以放心大胆的执行任何阻塞式任务,例如:
    for (var i = 0; i < 10; i++) {
        sleep(1000);
        toast("正在执行...");
    }
});

02.属性设置

我们所有的属性设置，例如:设置文本颜色、设置背景颜色、设置文本等等操作都自动放在ui线程调用了。 如果你有安卓开发基础，你应该了解到：我们处于子线程时，无法直接对UI属性进行直接操作，必须要放在ui线程。 但，这被我们封装了起来，你可以在任何线程中调用UI操作，例如：

let t1 = $thread.create(() => {
    //当前线程处于子线程中,但是依旧可以对ui进行操作
    ui.id("mBut").setText("我在子线程中被修改");
});
t1.start();

03.布局根节点

我们布局的根节点是以ui为名称的节点，它是唯一一个没有父级节点的控件，默认是线性布局(LinearLayout)组件构成的。 由于ui作为了根节点，所以无法提供属性设置的功能，但是你可以默认它就是一个普通的线性布局(LinearLayout) 于是，我们可以在ui中直接放置其他的控件节点，如下所示：

<ui>
    <!--这里写其他的控件-->
    <text text="我是文本"/>
    <button text="我是按钮"/>
</ui>