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

输入框

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

输入框-input

组件原生类型:{com.google.android.material.textfield.TextInputEditText}

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

输入框：一个可以输入文字的地方。

一、基础用法

简单写一个登录的小案例，当点击登录按钮的时候就获取用户输入的信息，当点击取消按钮的时候就清空用户输入的内容：

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input id="count" prefix="账号:" w="max" />
        <input id="pass" prefix="密码:" type="pass" w="max"  />
        <button-group dir="h" w="max">
            <button id="login" text="登录" style="outline" weight="1"/>
            <button id="cancel" text="取消" style="outline" weight="1" textColor="#B44A4A" />
        </button-group>
    </linear>
</ui>
let ui = $ui.layout("ui.xml");
ui.show();
//[登录]获取用户输入的信息
ui.id("login").click(() => {
    let count = ui.id("count").getText();
    let pass = ui.id("pass").getText();
    alert("账号信息", "账号：" + count + "\n" + "密码：" + pass);
});
//[取消]清空用户输入的内容
ui.id("cancel").click(() => {
    ui.id("count").setText("");
    ui.id("pass").setText("");
    toast("已清空");
});

二、常用属性

style - 样式

设置样式

可选:fill,outline

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input style="outline" text="outline样式" w="max" />
        <input style="fill" text="fill样式" w="max" />
    </linear>
</ui>

hint - 提示文本

提示文本

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input hint="请输入" w="max" />
    </linear>
</ui>

text - 文本

设置文本

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input hint="请输入" text="默认文字" w="max" />
    </linear>
</ui>

def - 文本

设置文本

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input hint="请输入" def="默认文字" w="max" />
    </linear>
</ui>

len - 字数限制

设置字数限制

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input len="50" w="max" />
    </linear>
</ui>

maxLines - 最大行数

最大行数

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input maxLines="3" w="max" />
    </linear>
</ui>

minLines - 最少行数

最少行数

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input minLines="3" w="max" />
    </linear>
</ui>

help - 帮助文字

帮助文字

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input help="可以输入中文" w="max" />
    </linear>
</ui>

prefix - 前缀

设置前缀

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input prefix="账号:" w="max" />
    </linear>
</ui>

suffix - 后缀

设置后缀

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input suffix="@qq.com" text="2450099002" w="max" />
    </linear>
</ui>

type - 输入类型

设置输入类型

可选:pass,number,phone

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input type="pass" text="2450099002" w="max" />
    </linear>
</ui>

bg - 背景颜色

设置背景颜色

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input bg="#518855" w="max" />
    </linear>
</ui>

bgImg - 背景图片

设置背景图片

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input bgImg="/res/bg-input.png" w="max" />
    </linear>
</ui>

color - 主题颜色

设置主题颜色

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input color="#518855" text="主题颜色" w="max" />
        <input color="#B44A4A" text="主题颜色" w="max" />
    </linear>
</ui>

textColor - 文本颜色

设置文本颜色

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input textColor="#518855" text="文字颜色" w="max" />
        <input textColor="#B44A4A" text="文字颜色" w="max" />
    </linear>
</ui>

strokeColor - 边框颜色

设置边框颜色

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input strokeColor="#518855" text="边框颜色" w="max" />
    </linear>
</ui>

strokeWidth - 边框宽度

设置边框宽度

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input strokeWidth="3" text="边框宽度" w="max" />
        <input strokeWidth="6" text="边框宽度" w="max" />
    </linear>
</ui>

radius - 弧度

设置弧度

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input text="设置弧度" radius="16" w="max" />
        <input text="设置弧度" radius="0,16" w="max" />
        <input text="设置弧度" radius="20,5,5,20" w="max" />
    </linear>
</ui>

padding - 布局内边距

设置布局内边距

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <!-- 左、上、右、下 -->
        <input text="设置弧度" padding="30,30,30,30" w="max" />
    </linear>
</ui>

gravity - 布局重力

布局重力

<ui>
    <statusbar />
    <linear w="max" dir="v" gravity="center" h="max" padding="20">
        <input text="设置重力" gravity="center" w="max" />
    </linear>
</ui>

三、常用函数

setHint(hint)

设置预提示

  • 参数 : hint {string} 预提示

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//设置预提示
mInput.setHint("请输入名字");

setBgColor(color)

设置背景颜色

  • 参数 : color {string} 颜色

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//设置背景颜色
mInput.setBgColor("#ff0000");//也可以是M3主题动态色，例如:colorPrimary

setStrokeColor(color)

设置边框颜色

  • 参数 : color {string} 颜色

  • 版本 : 1.5.3

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//设置边框颜色
mInput.setStrokeColor("#ff0000");//也可以是M3主题动态色，例如:colorPrimary

setStrokeWidth(strokeWidth)

设置边框宽度

  • 参数 : strokeWidth {int} 宽度

  • 版本 : 1.5.3

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//设置边框宽度
mInput.setStrokeWidth(5);//单位:dp

setRadius(topLeft, topRight, bottomLeft, bottomRight)

设置弧度

  • 参数 : topLeft {float} 左上

  • 参数 : topRight {float} 上右

  • 参数 : bottomLeft {float} 左下

  • 参数 : bottomRight {float} 右下

  • 版本 : 1.5.3

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//设置边框弧度
mInput.setRadius(20,20,5,5);//单位:dp

setText(text)

设置文字

  • 参数 : text {string} 文字内容

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//设置文本
mInput.setText("我是文字");

getText()

获取输入框内容

  • 返回 : {string} 内容

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

setError(msg)

设置异常信息提示

  • 参数 : msg {string} 异常提示

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//设置异常提示
mInput.setError("错啦");

getEditText()

获得TextInputEditText对象

  • 返回 : {TextInputEditText} 编辑框对象

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//获得TextInputEditText对象
let editText = mInput.getEditText();

onChanged(callback)

监听文本改变

  • 参数 : callback {(text,start,before,count)=>{}} 监听回调

  • 版本 : 1.8.0

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//监听文本改变
mInput.onChanged((text,start,before,count)=>{
    log("文本改变了:"+text);
});

onChangedAfter(callback)

监听文本改变后

  • 参数 : callback {(text)=>{}} 监听回调

  • 版本 : 1.8.0

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//监听文本改变
mInput.onChangedAfter((text)=>{
    log("文本改变了:"+text);
});

onChangedBefore(callback)

监听文本改变前

  • 参数 : callback {(text,start,count,after)=>{}} 监听回调

  • 版本 : 1.8.0

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//监听文本改变
mInput.onChangedBefore((text,start,count,after)=>{
    log("文本改变了:"+text);
});

onFocusChange(callback)

监听焦点改变

  • 参数 : callback {(hasFocus)=>{}} 监听回调

  • 版本 : 1.8.2

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mInput = ui.id("mInput");
//监听焦点改变
mInput.onFocusChange((hasFocus)=>{
    log("焦点改变了:"+hasFocus);
});
ON THIS PAGE