综合案例

  • 更新时间:2026-03-05 21:25:56

Xml代码

<界面>
    <状态条 />
    <!--使用锚点布局配合滚动布局可以使应用条自带动画-->
    <锚点布局="最大">
        <!--应用标题栏-->
        <应用条布局="最大">
            <!--
            返回:开启返回按钮
            滑动标识:配置滚动布局滚动时的动画标记
            -->
            <应用条 副标题="单选按钮"="最大" 标识="mAppbar" 标题="Radio"
                滑动标识="滑动|进入时总是可见" 返回="是" />
        </应用条布局>
        <!--滑动布局 在锚点布局中可以配置控件行为是:适配应用条-->
        <滑动布局="最大" 行为="应用条"="最大">
            <!--线性布局:被滑动布局包裹,子控件较多时允许向下滑动-->
            <!--内边距:增加内边距[左,上,右,下]-->
            <线性布局 内边距="20,20,20,100"="最大"="最大">
                <!--概览-->
                <文本 可选择="是" 文本="概览" 重力="中间"="50" />
                <单选按钮组="最大" 方向="横向">
                    <单选按钮 主题颜色="#3574F0" 文本="吃饭" />
                    <单选按钮 主题颜色="#518855" 文本="睡觉" />
                    <单选按钮 主题颜色="#B44A4A" 文本="游戏" />
                </单选按钮组>
                <!--设置主题颜色-->
                <文本 可选择="是" 文本="设置主题颜色 主题颜色=颜色" 重力="中间"="50" />
                <单选按钮组="最大" 方向="横向">
                    <单选按钮 主题颜色="#3574F0" 文本="吃饭" />
                    <单选按钮 主题颜色="#518855" 文本="睡觉" />
                    <单选按钮 主题颜色="#B44A4A" 文本="游戏" />
                </单选按钮组>
                <!--设置选中-->
                <文本 可选择="是" 文本="设置选中 选中=是" 重力="中间"="50" />
                <单选按钮组="最大" 方向="横向">
                    <单选按钮 主题颜色="#3574F0" 文本="吃饭" />
                    <单选按钮 主题颜色="#518855" 文本="睡觉" 选中="是" />
                    <单选按钮 主题颜色="#B44A4A" 文本="游戏" />
                </单选按钮组>
                <!--设置文本-->
                <文本 可选择="是" 文本="设置文本 文本=文本" 重力="中间"="50" />
                <单选按钮组="最大" 方向="横向">
                    <单选按钮 主题颜色="#3574F0" 文本="我是文本1" />
                    <单选按钮 主题颜色="#518855" 文本="我是文本2" />
                </单选按钮组>
                <!--设置文本颜色-->
                <文本 可选择="是" 文本="设置文本颜色 文本颜色=文本颜色" 重力="中间"="50" />
                <单选按钮组="最大" 方向="横向">
                    <单选按钮 主题颜色="#3574F0" 文本="我是文本1" 文本颜色="#57965C" />
                    <单选按钮 主题颜色="#518855" 文本="我是文本2" 文本颜色="#C94F4F" />
                </单选按钮组>
                <!--设置最小宽度-->
                <文本 可选择="是" 文本="设置最小宽度 最小宽度=100" 重力="中间"="50" />
                <单选按钮组="最大" 方向="竖向">
                    <单选按钮 文本="最小宽度:100" 最小宽度="100" 背景颜色="#57965C" />
                    <单选按钮 文本="最小宽度:150" 最小宽度="150" 背景颜色="#3574F0" />
                    <单选按钮 文本="最小宽度:200" 最小宽度="200" 背景颜色="#C94F4F" />
                </单选按钮组>
                <!--设置最小高度-->
                <文本 可选择="是" 文本="设置最小高度 最小高度=50" 重力="中间"="50" />
                <单选按钮组="最大" 方向="横向">
                    <单选按钮 文本="最小高度:50" 最小高度="50" 背景颜色="#57965C" />
                    <单选按钮 文本="最小高度:60" 最小高度="60" 背景颜色="#3574F0" />
                    <单选按钮 文本="最小高度:70" 最小高度="70" 背景颜色="#C94F4F" />
                </单选按钮组>
                <!--设置内边距-->
                <文本 可选择="是" 文本="设置内边距 内边距=10" 重力="中间"="50" />
                <单选按钮组="最大" 方向="竖向">
                    <单选按钮 内边距="10" 文本="内边距:10" 背景颜色="#57965C" />
                    <单选按钮 内边距="20" 文本="内边距:20" 背景颜色="#3574F0" />
                    <单选按钮 内边距="30" 文本="内边距:30" 背景颜色="#C94F4F" />
                </单选按钮组>
                <!--设置重力-->
                <文本 可选择="是" 文本="设置重力 重力=重力" 重力="中间"="50" />
                <!--将宽度设置到最大才能看到效果-->
                <单选按钮组="最大" 方向="竖向">
                    <单选按钮="最大" 文本="开始" 重力="开始" />
                    <单选按钮="最大" 文本="中间" 重力="中间" />
                    <单选按钮="最大" 文本="结束" 重力="结束" />
                </单选按钮组>
                <!--设置背景颜色-->
                <文本 可选择="是" 文本="设置背景颜色 背景颜色=颜色" 重力="中间"="50" />
                <单选按钮组="最大" 方向="竖向">
                    <单选按钮 文本="看我背景颜色" 背景颜色="#57965C" />
                    <单选按钮 文本="看我背景颜色" 背景颜色="#3574F0" />
                </单选按钮组>
                <!--设置背景图片-->
                <文本 可选择="是" 文本="设置背景图片 背景图片=图片" 重力="中间"="50" />
                <单选按钮组="最大" 方向="横向">
                    <单选按钮 主题颜色="背景" 文本="睡觉" 文本颜色="背景" 权重="0.2"
                        背景图片="example/$ui - 交互界面/17.radio-单选按钮/img/img.png"
                        重力="中间" />
                    <单选按钮 主题颜色="背景" 文本="游戏" 文本颜色="背景" 权重="0.2"
                        背景图片="example/$ui - 交互界面/17.radio-单选按钮/img/img_1.png"
                        重力="中间" />
                    <单选按钮 主题颜色="背景" 文本="吃饭" 文本颜色="背景" 权重="0.2"
                        背景图片="example/$ui - 交互界面/17.radio-单选按钮/img/img_2.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();