综合案例

  • 更新时间:2026-03-06 16:02:41

Xml代码

<界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局="最大">
        <!--应用标题栏-->
        <应用条布局="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="输入框"="最大" 标识="mAppbar" 标题="Input"
                滑动标识="滑动|进入时总是可见" 返回="true" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局="最大" 行为="应用条"="最大">
            <!--线性布局:被滑动布局包裹,子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100"="最大"="最大">
                <!--基础用法-->
                <文本 可选择="是" 文本="基础用法 设置图片" 重力="中间"="50" />
                <线性布局="最大" 方向="竖向" 重力="中间">
                    <输入框="最大" 标识="mInput" 风格="边框" />
                    <!--简单的示例:点击按钮的时候会显示输入框的内容-->
                    <按钮="最大" 文本="获取内容" 标识="mButton" 风格="边框" />
                </线性布局>
                <!--设置样式-->
                <文本 可选择="是" 文本="设置样式 风格=样式" 重力="中间"="50" />
                <线性布局="最大" 方向="竖向" 重力="中间">
                    <输入框="最大" 文本="轮廓样式" 风格="边框" />
                    <输入框="最大" 文本="填充样式" 风格="填充" />
                </线性布局>
                <!--设置提示-->
                <文本 可选择="是" 文本="设置提示 tip=提示" 重力="中间"="50" />
                <输入框="最大" 提示="请输入" />
                <!--设置文本-->
                <文本 可选择="是" 文本="设置文本 text=文本" 重力="中间"="50" />
                <输入框="最大" 文本="我是文本" />
                <!--设置默认文本-->
                <文本 可选择="是" 文本="设置默认文本 默认=文本" 重力="中间"="50" />
                <输入框="最大" 默认="我是文本" />
                <!--设置文本颜色-->
                <文本 可选择="是" 文本="设置文本颜色 文本颜色=颜色" 重力="中间"="50" />
                <输入框="最大" 文本="我是文本" 文本颜色="#57965C" />
                <!--设置文本尺寸-->
                <文本 可选择="是" 文本="设置文本尺寸 文本尺寸=尺寸" 重力="中间"="50" />
                <线性布局="最大" 方向="竖向" 重力="中间">
                    <输入框="最大" 文本="尺寸:10" 文本尺寸="10" />
                    <输入框="最大" 文本="尺寸:20" 文本尺寸="20" />
                </线性布局>
                <!--设置字数限制-->
                <文本 可选择="是" 文本="设置字数限制 字数=长度" 重力="中间"="50" />
                <输入框 字数="10"="最大" 文本="123" />
                <!--设置最大行数-->
                <文本 可选择="是" 文本="设置最大行数 最大行数=行数" 重力="中间"="50" />
                <输入框="最大" 最大行数="5" />
                <!--设置最小行数-->
                <文本 可选择="是" 文本="设置最小行数 最小行数=行数" 重力="中间"="50" />
                <输入框="最大" 最小行数="3" />
                <!--设置单行模式-->
                <文本 可选择="是" 文本="设置单行模式 单行模式=是" 重力="中间"="50" />
                <输入框 单行模式="是"="最大" />
                <!--设置帮助文字-->
                <文本 可选择="是" 文本="设置帮助文字 帮助=帮助" 重力="中间"="50" />
                <输入框="最大" 帮助="请输入名称" />
                <!--设置前缀-->
                <文本 可选择="是" 文本="设置前缀 前缀=前缀" 重力="中间"="50" />
                <输入框 前缀="邮箱:"="最大" />
                <!--设置前缀颜色-->
                <文本 可选择="是" 文本="设置前缀 前缀颜色=前缀颜色" 重力="中间"="50" />
                <输入框 前缀="邮箱:" 前缀颜色="#C94F4F"="最大" />
                <!--设置后缀-->
                <文本 可选择="是" 文本="设置后缀 后缀=后缀" 重力="中间"="50" />
                <输入框 后缀="@qq.com"="最大" />
                <!--设置后缀颜色-->
                <文本 可选择="是" 文本="设置后缀 后缀颜色=后缀颜色" 重力="中间"="50" />
                <输入框 后缀="@qq.com" 后缀颜色="#C94F4F"="最大" />
                <!--设置类型-->
                <文本 可选择="是" 文本="设置类型 type=类型" 重力="中间"="50" />
                <线性布局="最大" 方向="竖向" 重力="中间">
                    <!--密码-->
                    <输入框="最大" 文本="abcdefg" 类型="密码" />
                    <!--数字-->
                    <输入框="最大" 文本="3.1415926" 类型="数字" />
                    <!--号码-->
                    <输入框="最大" 文本="123593749723" 类型="号码" />
                </线性布局>
                <!--设置主题颜色-->
                <文本 可选择="是" 文本="设置主题颜色 color=颜色" 重力="中间"="50" />
                <输入框 主题颜色="#C94F4F"="最大" 文本="主题颜色:红色" />
                <!--设置边框颜色-->
                <文本 可选择="是" 文本="设置边框颜色 边框颜色=颜色" 重力="中间"="50" />
                <输入框="最大" 文本="边框颜色:红色" 边框颜色="#C94F4F" />
                <!--设置边框宽度(dp)-->
                <文本 可选择="是" 文本="设置边框宽度 边框宽度=宽度" 重力="中间"="50" />
                <输入框="最大" 文本="边框加厚" 边框宽度="10" />
                <!--设置弧度-->
                <文本 可选择="是" 文本="设置弧度 弧度=弧度" 重力="中间"="50" />
                <输入框="最大" 弧度="25" 文本="设置四角弧度" />
                <输入框="最大" 弧度="5,20" 文本="设置同角弧度" />
                <输入框="最大" 弧度="30,10,10,30" 文本="定制对角度弧度" />
                <!--设置内边距-->
                <文本 可选择="是" 文本="设置内边距 内边距=内边距" 重力="中间"="50" />
                <输入框 内边距="15"="最大" 文本="内边距:15" />
                <输入框 内边距="25"="最大" 文本="内边距:25" />
                <!--设置重力-->
                <文本 可选择="是" 文本="设置重力 重力=重力" 重力="中间"="50" />
                <输入框="最大" 文本="开始" 重力="开始" />
                <输入框="最大" 文本="结束" 重力="结束" />
                <!--设置背景颜色-->
                <文本 可选择="是" 文本="设置背景颜色 背景颜色=颜色" 重力="中间"="50" />
                <输入框="最大" 文本="看我背景" 背景颜色="#57965C" />
                <!--设置背景图片-->
                <文本 可选择="是" 文本="设置背景图片 背景图片=图片" 重力="中间"="50" />
                <输入框="最大" 文本="看我背景"
                    背景图片="example/$ui - 交互界面/10.input-输入框/img/img.png" />
            </线性布局>
        </滑动布局>
    </锚点布局>
</界面>

JS代码

let ui = $ui.layout("example/$ui - 交互界面/10.input-输入框/input.xml");
//绑定标题栏返回按钮
ui.id("mAppbar").back(()=>{
    ui.finish();
});
//先获取控件
let mButton = ui.id("mButton");
let mInput = ui.id("mInput");
//找到按钮、点击按钮的时候就显示输入框的内容
mButton.click(()=>{
    //获取输入框的内容
    let content = mInput.getText();
    //显示输入框的内容
    mButton.snack("内容:"+content);
});
//显示界面
ui.show();