autojs ui多界面的最理想实现方式

ui多界面的场景很常见，autojs官方的教程提供了调用脚本引擎方法，和直接更换ui界面xml的方法，这两种方法很明显的缺陷就是无法保存ui界面元素的状态，而且代码交织杂乱，界面之间互相切换的逻辑复杂。

这里提供一个可以将单独ui封装进一个对象的思路，其优点很明显，首先单界面代码可以达到闭包效果，其次，抄写别人代码的方式也非常简单，只需要复制粘贴进对应位置即可

正文：

"ui";

ui.layout(
    <drawer id="drawer">
        <frame id="body" h="*" w="*">
        </frame>
    </drawer>

)

function setContainer(v) {
    ui.body.removeAllViews();
    ui.body.addView(v, new android.widget.FrameLayout.LayoutParams(-1, -1));
}


var page_1={
    ui: ui.inflate(
        <frame>
        <vertical w="*" h="*">
            <text text="这是界面一" w="*" gravity="center" />
            <input hint="在这里输入一些内容，切换界面不使其会消失" w="*"/>
            <button id="change_to_page_2" w="*" text="点击切换至界面二"/>
        </vertical>
   </frame>
    ),
    initList: function() {
        console.log("打开了界面一")
        ui.change_to_page_2.on("click",()=>{
            page_2.activate()
        })
        
    },
    activate: function() {
        setContainer(this.ui);
        if (!this.inited) this.initList();
        this.inited = true;
    }
}

var page_2={
    ui: ui.inflate(
       <frame>
            <vertical w="*" h="*">
                <text text="这是界面二" w="*" gravity="center" />
                <input hint="在这里输入一些内容，切换界面不使其会消失" w="*"/>
                <button id="change_to_page_1" w="*" text="点击切换至界面一"/>
            </vertical>
       </frame>
    ),
    initList: function() {
        console.log("打开了界面二")
        ui.change_to_page_1.on("click",()=>{
            page_1.activate()
        })
    },
    activate: function() {
        setContainer(this.ui);
        if (!this.inited) this.initList();
        this.inited = true;
    }
}

page_1.activate()

/*
这是模板，可以简单的照搬别人的代码，集成进同一ui
var demo={
    ui: ui.inflate(
        {{//这里写xml代码}}
    ),
    initList: function() {
        //这里写其他的函数
    },
    activate: function() {
        //这里不用动
        setContainer(this.ui);
        if (!this.inited) this.initList();
        this.inited = true;
    }
}
*/