综合案例

  • 更新时间:2026-03-03 11:27:42

Xml代码

<界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局="最大">
        <!--应用标题栏-->
        <应用条布局="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="编辑框"="最大" 标识="mAppbar" 标题="Edit"
                滑动标识="滑动|进入时总是可见" 返回="真" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局="最大" 行为="应用条"="最大">
            <!--线性布局:被滑动布局包裹,子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100"="最大"="最大">
                <!--概览-->
                <文本 可选择="真" 文本="概览" 重力="中间"="50" />
                <线性布局="最大" 方向="横向">
                    <编辑框 文本="我是" 文本颜色="#57965C" />
                    <编辑框 文本="一个" />
                    <编辑框 文本="简约的" 文本颜色="#C94F4F" />
                    <编辑框 文本="编辑框" 文本颜色="#3574F0" />
                </线性布局>
                <!--基础用法-->
                <文本 可选择="真" 文本="基础用法 监听点击事件" 重力="中间"="50" />
                <编辑框="最大" 文本="我是文本" 标识="mEdit" />
                <!--设置提示-->
                <文本 可选择="真" 文本="设置提示 提示=提示" 重力="中间"="50" />
                <编辑框="最大" 提示="提示文本" />
                <!--设置文本-->
                <文本 可选择="真" 文本="设置文本 文本=我是文本" 重力="中间"="50" />
                <编辑框="最大" 文本="我是文本" />
                <!--设置文本颜色-->
                <文本 可选择="真" 文本="设置文本颜色 文本颜色=颜色" 重力="中间"="50" />
                <编辑框="最大" 文本="我是文本" 文本颜色="#C94F4F" />
                <!--设置默认文本-->
                <文本 可选择="真" 文本="设置默认文本 默认=文本" 重力="中间"="50" />
                <编辑框="最大" 默认="默认文本" />
                <!--设置类型-->
                <文本 可选择="真" 文本="设置类型 类型=类型" 重力="中间"="50" />
                <!--密码类型-->
                <文本 可选择="真" 文本="设置类型 类型=密码" 重力="中间"="50" />
                <编辑框="最大" 文本="123456???" 类型="密码" />
                <!--数字类型-->
                <文本 可选择="真" 文本="设置类型 类型=数字" 重力="中间"="50" />
                <编辑框="最大" 文本="123" 类型="数字" />
                <!--手机号码类型-->
                <文本 可选择="真" 文本="设置类型 类型=电话" 重力="中间"="50" />
                <编辑框="最大" 文本="15047070177" 类型="电话" />
                <!--设置文本尺寸-->
                <文本 可选择="真" 文本="设置文本尺寸 文本尺寸=15" 重力="中间"="50" />
                <编辑框="最大" 文本="文本尺寸:10" 文本尺寸="10" />
                <编辑框="最大" 文本="文本尺寸:15" 文本尺寸="15" />
                <!--设置最小宽度-->
                <文本 可选择="真" 文本="设置最小宽度 最小宽度=100" 重力="中间"="50" />
                <编辑框 文本="最小宽度:200" 最小宽度="200" 背景颜色="#5557965C" />
                <编辑框 文本="最小宽度:250" 最小宽度="250" 背景颜色="#55C94F4F" />
                <!--设置最小高度-->
                <文本 可选择="真" 文本="设置最小高度 最小高度=100" 重力="中间"="50" />
                <线性布局="最大" 方向="横向" 重力="中间">
                    <编辑框 文本="最小高度:100" 最小高度="100" 背景颜色="#5557965C" />
                    <编辑框 文本="最小高度:150" 最小高度="150" 背景颜色="#55C94F4F" />
                </线性布局>
                <!--设置内边距-->
                <文本 可选择="真" 文本="设置内边距 内边距=左,上,右,下" 重力="中间"="50" />
                <编辑框 内边距="10,0,20,30" 文本="看我内边距" 背景颜色="#5557965C" />
                <!--设置重力-->
                <文本 可选择="真" 文本="设置重力 重力=重力" 重力="中间"="50" />
                <!--为了演示效果,宽度设置到最大 w=max -->
                <编辑框="最大" 文本="我在左边" 重力="开始|中间" />
                <编辑框="最大" 文本="我在中间" 重力="中间" />
                <编辑框="最大" 文本="我在右边" 重力="结束|中间" />
                <!--设置背景颜色-->
                <文本 可选择="真" 文本="设置背景颜色 背景颜色=颜色" 重力="中间"="50" />
                <编辑框="最大" 文本="看我背景颜色" 背景颜色="#5557965C" />
                <编辑框="最大" 文本="看我背景颜色" 背景颜色="#55C94F4F" />
                <编辑框="最大" 文本="看我背景颜色" 背景颜色="#553574F0" />
                <!--设置背景图片-->
                <文本 可选择="真" 文本="设置背景图片 背景图片=图片地址" 重力="中间"="50" />
                <编辑框="最大" 文本="看我背景图片" 文本颜色="#FFFFFF"
                    背景图片="example/$ui - 交互界面/06.edit-编辑框/img/bg-edit.png" />
            </线性布局>
        </滑动布局>
    </锚点布局>
</界面>

JS代码

let ui = $ui.layout("example/$ui - 交互界面/05.drop-下拉框/drop.xml");
//绑定标题栏返回按钮
ui.id("appbar").back(()=>{
    ui.finish();
});
//找到编辑框组件
let mEdit = ui.id("mEdit");
//找到编辑框设置文本
mEdit.setText("我是被设置的文本");
//监听文本变化并且输出到控制台 (完整参数:String text, int start, int before, int count)
mEdit.onChanged((text)=>{
    log(text);
});
//显示界面
ui.show();