AIGame
API英文文档
API中文文档
UI英文文档
UI中文文档
API英文文档
API中文文档
UI英文文档
UI中文文档

下拉框

  • 更新时间:2025-12-02 10:12:46

下拉框-drop

布局原生类型:{com.google.android.material.textfield.TextInputLayout} 组件原生类型:{com.google.android.material.textfield.MaterialAutoCompleteTextView}

下拉框类似于一个小菜单，点一下才会展开让你选，核心用途就是帮你方便、规范地挑东西。

一、基础用法

<ui>
    <statusbar />
    <linear w="max" padding="15" gravity="center" h="max">
        <drop id="mDrop" w="max">
            <!-- 添加选项 -->
            <item text="吃饭" />
            <item text="睡觉" />
            <item text="电影" />
        </drop>
    </linear>
</ui>
//解析布局
let ui = $ui.layout("ui.xml");
ui.show();//显示界面
//为下拉框添加选中事件
ui.id("mDrop").onCheck((value, index) => {
    info("选中下标为:" + index + "的元素:" + value);
});

二、常用属性

style - 样式

设置样式

可选:fill,outline

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
        <drop style="fill" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

hint - 提示文字

设置提示文字

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop hint="你的爱好" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

def - 默认文字

设置默认文字

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop hint="你的爱好" def="吃饭" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

item - 子选项

设置子选项

子选项使用item标签，只有text一个属性

<ui>
    <statusbar />
    <linear w="max" gravity="center">
        <drop id="mDrop" w="max">
            <!-- 添加选项 -->
            <item text="吃饭" />
            <item text="睡觉" />
            <item text="电影" />
        </drop>
    </linear>
</ui>

color - 主题颜色

设置主题颜色

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop color="#B44A4A" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

textColor - 文字的颜色

设置文字的颜色

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop color="#B44A4A" textColor="#57965C" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

hideIcon - 是否隐藏后面的倒三角图标

是否隐藏后面的倒三角图标

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop hideIcon="true" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

gravity - 布局重力

设置布局重力

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop hideIcon="true" gravity="center" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

padding - 布局内边距

设置布局内边距

单位:dp

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop hideIcon="true" padding="20" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

bg - 背景颜色

设置背景颜色

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop bg="#518855" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

bgImg - 背景图片

设置背景图片

<ui>
    <statusbar />
    <linear w="max" padding="100" gravity="center">
        <drop bgImg="/res/bg-drop.png" style="outline" w="max">
            <item text="吃饭" />
            <item text="睡觉" />
        </drop>
    </linear>
</ui>

三、常用函数

onCheck(callback)

事件监听

  • 参数 : callback {(title,index)=>{}} 回调

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let drop = ui.id("mDrop");
//监听选中事件
drop.onCheck((title,index)=>{
    toast(title);
});

setText(text)

设置文字

  • 参数 : text {string} 文字

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let drop = ui.id("mDrop");
//设置文字
drop.setText("选项1");

getText()

获得文字

  • 返回 : {string} 文字

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let drop = ui.id("mDrop");
//获取文本
let text = drop.getText();

flush(items)

设置数据

  • 参数 : items {string[]} 数据

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let drop = ui.id("mDrop");
//设置数据
drop.flush(["张三","李四","王五"]);
ON THIS PAGE