常用 UI 控件 — text、button、input、img 等使用详解

控件类型总览

text — 文本控件

<text 
    text="显示的文字内容"
    
    // 字体相关
    textSize="18sp"            // 字号（sp 单位）
    textColor="#333333"        // 颜色
    textStyle="bold"           // bold / italic / normal
    fontFamily="sans-serif"    // 字体
    
    // 对齐与省略
    gravity="center"           // left / center / right / top / bottom
    lines="2"                  // 最多显示几行
    maxLines="3"
    ellipsize="end"            // 末尾省略号
    
    // 宽高
    w="*" h="auto"
/>

// 运行时修改
ui.textView.setText("新文字");
ui.textView.setTextColor(colors.parseColor("#FF0000"));

button — 按钮

<button 
    text="点击我"
    
    // 背景
    bg="#2196F3"               // 纯色
    bg="@drawable/my_shape"    // drawable
    
    // 状态
    enabled="true"             // 是否可点击
    visibility="visible"       // visible / gone / invisible
/>

// 事件绑定
ui.myButton.click(() => {
    toast("按钮被点击");
});

input — 输入框（EditText）

<input 
    hint="请输入内容"           // 占位提示文字
    text=""                    // 初始文字
    inputType="text"           // 输入类型
    password="false"           // 密码模式
    singleLine="true"          // 单行模式
    
    // 输入过滤
    digits="0123456789"        // 只允许数字
    maxLength="50"             // 最大长度
/>

// 输入类型可选值
// text — 普通文本
// number — 数字
// phone — 电话号码
// email — 邮箱
// password — 密码
// datetime — 日期时间
// textMultiLine — 多行文本

// 获取 / 设置值
let val = ui.inputBox.getText();
ui.inputBox.setText("新内容");

// 监听输入变化
ui.inputBox.on("change", (text) => {
    console.log("当前输入: " + text);
});

img — 图片控件

<img 
    src="/sdcard/picture.png"  // 本地文件路径
    // 或网络图片（需确保已下载）
    
    w="200" h="200"            // 尺寸
    scaleType="centerCrop"     // 缩放模式
/>

// scaleType 可选值
// center — 居中显示原图
// centerCrop — 按比例填满裁剪
// centerInside — 完整显示，不足留空
// fitCenter — 等比缩放居中
// fitXY — 拉伸填满

// 动态设置图片
ui.myImage.setImage("/sdcard/new.png");

checkbox — 复选框

<checkbox 
    text="我已阅读并同意"
    checked="false"
/>

// 获取状态
let agreed = ui.agreeBox.isChecked();

// 监听变化
ui.agreeBox.on("change", (checked) => {
    console.log("同意状态: " + checked);
});

switch — 开关

<switch 
    text="启用自动运行"
    checked="true"
/>

ui.autoRunSwitch.on("change", (checked) => {
    console.log("自动运行: " + (checked ? "开启" : "关闭"));
});

seekbar — 滑动条

<seekbar 
    max="100"              // 最大值
    progress="50"          // 当前进度
    w="*"
/>

// 获取进度
let value = ui.seekbar.getProgress();

// 监听变化
ui.seekbar.on("change", (progress) => {
    console.log("当前值: " + progress);
});

progressbar — 进度条

// 水平进度条
<progressbar 
    max="100" 
    progress="30"
    style="@android:style/Widget.ProgressBar.Horizontal"
    w="*"
/>

// 不确定进度（转圈）
<progressbar />

// 更新进度
ui.loadingBar.setProgress(75);

horizontal / vertical — 布局容器

// 水平排列
<horizontal padding="10">
    <text text="左侧"/>
    <text text="中间"/>
    <text text="右侧"/>
</horizontal>

// 垂直排列
<vertical w="*" h="*" padding="16">
    <text text="标题" textSize="20sp"/>
    <text text="内容" layout_weight="1"/>
    <button text="底部按钮" w="auto"/>
</vertical>

// layout_weight 分配剩余空间
<horizontal w="*">
    <text text="左" layout_weight="1"/>  // 占 1 份
    <text text="右" layout_weight="2"/>  // 占 2 份（比左宽两倍）
</horizontal>

frame — 帧布局

// 子控件按顺序叠加（后面的盖在前面的上面）
<frame w="300" h="300">
    <img src="/sdcard/bg.png" w="*" h="*"/>
    <text text="居中文字" layout_gravity="center" textSize="24sp"/>
    <button text="右上角按钮" layout_gravity="top|right"/>
</frame>

// layout_gravity 可选值
// left / top / right / bottom / center
// 可组合: top|left, bottom|center

ScrollView — 滚动容器

// 当内容超过屏幕高度时自动滚动
<ScrollView h="*">
    <vertical padding="16">
        <text text="长内容..." textSize="14"/>
        <!-- 很多控件... -->
        <button text="底部按钮" w="*"/>
    </vertical>
</ScrollView>

WebView — 浏览器控件

<WebView id="webview" w="*" h="*"/>

// 加载 URL
ui.webview.loadUrl("https://docs.autojs6.com");

// 加载 HTML 内容
ui.webview.loadHtml("<h1>Hello</h1>");

// WebView 设置
ui.webview.setJavaScriptEnabled(true);
ui.webview.setDomStorageEnabled(true);

canvas — 画布控件

<canvas id="myCanvas" w="*" h="300"/>

// 在画布上绘制
ui.myCanvas.on("draw", (canvas) => {
    // canvas 是 Canvas 对象
    canvas.drawText("Hello", 50, 100);
    canvas.drawCircle(200, 200, 50, paint);
});

通用属性速查

所有控件都支持以下属性：

实战：登录表单

"ui";

ui.layout(
    <vertical padding="24">
        <text text="欢迎回来" textSize="28sp" textStyle="bold"/>
        <text text="请输入账号信息登录" textSize="14sp" textColor="#888" marginTop="8"/>
        
        <input id="email" 
            hint="邮箱地址" 
            inputType="emailAddress"
            marginTop="32"
            w="*"/>
        
        <input id="password" 
            hint="密码" 
            password="true"
            marginTop="16"
            w="*"/>
        
        <button id="loginBtn" 
            text="登录" 
            bg="#2196F3"
            textColor="#FFFFFF"
            marginTop="32"
            w="*"
            h="50"/>
        
        <checkbox id="remember" 
            text="记住我"
            marginTop="16"/>
        
        <text id="forgotPwd" 
            text="忘记密码？" 
            textColor="#2196F3"
            gravity="right"
            marginTop="8"/>
    </vertical>
);

ui.loginBtn.click(() => {
    let email = ui.email.getText();
    let pwd = ui.password.getText();
    
    if (!email || !pwd) {
        toast("请填写完整信息");
        return;
    }
    
    toast("登录中...");
    // 执行登录逻辑
});