综合案例

  • 更新时间:2026-03-03 09:18:43

Xml代码

<界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局="最大">
        <!--应用标题栏-->
        <应用条布局="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="下拉框"="最大" 标识="mAppbar" 标题="Drop"
                滑动标识="滑动|进入时总是可见" 返回="是" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局="最大" 行为="应用条"="最大">
            <!--线性布局:被滑动布局包裹,子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100"="最大"="最大">
                <!--概览-->
                <文本 可选择="是" 文本="概览" 重力="中间"="50" />
                <线性布局="最大" 方向="横向" 重力="开始|中间">
                    <下拉框 主题颜色="#57965C" 文本="吃饭">
                        <选项 文本="吃饭" />
                        <选项 文本="睡觉" />
                    </下拉框>
                    <下拉框 主题颜色="#C94F4F" 前缀="爱好:" 提示="请选择" 文本="睡觉" 风格="边框">
                        <选项 文本="吃饭" />
                        <选项 文本="睡觉" />
                    </下拉框>
                </线性布局>
                <!--基础用法-->
                <文本 可选择="是" 文本="基础用法 监听点击事件" 重力="中间"="50" />
                <下拉框="最大" 标识="drop">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置选项-->
                <文本 可选择="是" 文本="设置选项 选项标签" 重力="中间"="50" />
                <下拉框="最大">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置风格-->
                <文本 可选择="是" 文本="设置风格 风格=边框" 重力="中间"="50" />
                <下拉框="最大" 风格="边框">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置主题颜色-->
                <文本 可选择="是" 文本="设置主题颜色 主题颜色=颜色" 重力="中间"="50" />
                <下拉框 主题颜色="#F44236"="最大" 提示="你的爱好" 风格="边框" 默认="睡觉">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置提示-->
                <文本 可选择="是" 文本="设置提示 提示=提示" 重力="中间"="50" />
                <下拉框="最大" 提示="你的爱好" 风格="边框">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置提示颜色-->
                <文本 可选择="是" 文本="设置提示颜色 提示颜色=颜色" 重力="中间"="50" />
                <下拉框="最大" 提示="你的爱好" 提示颜色="#C94F4F" 文本="吃饭" 风格="边框">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置默认选项(和'文本'的效果一样)-->
                <文本 可选择="是" 文本="设置默认选项 默认=默认文字" 重力="中间"="50" />
                <下拉框="最大" 提示="你的爱好" 风格="边框" 默认="睡觉">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置默认文本(和'默认'的效果一样)-->
                <文本 可选择="是" 文本="设置默认文本 文本=默认文字" 重力="中间"="50" />
                <下拉框="最大" 提示="你的爱好" 文本="睡觉" 风格="边框">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置文本颜色-->
                <文本 可选择="是" 文本="设置文本颜色 文本颜色=颜色" 重力="中间"="50" />
                <下拉框="最大" 提示="你的爱好" 文本颜色="#F44236" 风格="边框" 默认="睡觉">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置文本尺寸-->
                <文本 可选择="是" 文本="设置文本尺寸 文本尺寸=尺寸" 重力="中间"="50" />
                <下拉框="最大" 文本尺寸="18" 风格="边框" 默认="睡觉">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <下拉框="最大" 文本尺寸="25" 风格="边框" 默认="睡觉">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置前缀-->
                <文本 可选择="是" 文本="设置前缀 前缀=邮箱" 重力="中间"="50" />
                <下拉框 前缀="邮箱:"="最大" 文本="123456789@qq.com" 文本尺寸="18">
                    <选项 文本="123456789@qq.com" />
                    <选项 文本="222333555@qq.com" />
                </下拉框>
                <!--设置前缀颜色-->
                <文本 可选择="是" 文本="设置前缀颜色 前缀颜色=颜色" 重力="中间"="50" />
                <下拉框 前缀="邮箱:" 前缀颜色="#C94F4F"="最大" 文本="123456789@qq.com"
                    文本尺寸="18">
                    <选项 文本="123456789@qq.com" />
                    <选项 文本="222333555@qq.com" />
                </下拉框>
                <!--设置后缀-->
                <文本 可选择="是" 文本="设置后缀 后缀=后缀" 重力="中间"="50" />
                <下拉框 前缀="邮箱:" 后缀="@qq.com"="最大" 文本="123456789" 文本尺寸="18">
                    <选项 文本="123456789" />
                    <选项 文本="222333555" />
                </下拉框>
                <!--设置后缀颜色-->
                <文本 可选择="是" 文本="设置后缀颜色 后缀颜色=颜色" 重力="中间"="50" />
                <下拉框 前缀="邮箱:" 后缀="@qq.com" 后缀颜色="#C94F4F"="最大" 文本="123456789"
                    文本尺寸="18">
                    <选项 文本="123456789" />
                    <选项 文本="222333555" />
                </下拉框>
                <!--设置隐藏尾部倒三角图标-->
                <文本 可选择="是" 文本="设置隐藏尾部倒三角图标 隐藏图标=是" 重力="中间"="50" />
                <下拉框="最大" 隐藏图标="是" 风格="边框">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置重力-->
                <文本 可选择="是" 文本="设置重力 重力=重力" 重力="中间"="50" />
                <下拉框="最大" 重力="开始" 风格="边框" 默认="吃饭">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <下拉框="最大" 重力="中间" 风格="边框" 默认="吃饭">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <下拉框="最大" 重力="结束" 风格="边框" 默认="吃饭">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置内边距-->
                <文本 可选择="是" 文本="设置内边距 内边距=内边距" 重力="中间"="50" />
                <下拉框 内边距="10"="最大" 风格="边框" 默认="吃饭">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <下拉框 内边距="20"="最大" 风格="边框" 默认="吃饭">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置背景颜色-->
                <文本 可选择="是" 文本="设置背景颜色 背景颜色=背景颜色" 重力="中间"="50" />
                <下拉框="最大" 背景颜色="#57965C" 风格="边框" 默认="吃饭">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
                <!--设置背景图片-->
                <文本 可选择="是" 文本="设置背景图片 背景图片=背景图片" 重力="中间"="50" />
                <下拉框="最大" 背景图片="example/$ui - 交互界面/05.drop-下拉框/img/img.png" 风格="边框" 默认="吃饭">
                    <选项 文本="吃饭" />
                    <选项 文本="睡觉" />
                </下拉框>
            </线性布局>
        </滑动布局>
    </锚点布局>
</界面>

JS代码

let ui = $ui.layout("example/$ui - 交互界面/05.drop-下拉框/drop.xml");
//绑定标题栏返回按钮
ui.id("appbar").back(()=>{
    ui.finish();
});
//找到下拉框并且设置监听事件
ui.id("drop").onCheck((title,index)=>{
    toast("选择了:"+title);
});
//显示界面
ui.show();