小片

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

小片-chip

原生类型:{com.google.android.material.chip.Chip}

可以当作小按钮来使用,也可以当作多选框来使用

小片:可以用来显示一些小标签什么的,还是蛮好看的。

不过,也可以用来作为按钮使用。

一、常用属性

text - 文本

设置文本

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip text="我是小片" />
    </linear>
</ui>

icon - 图标

设置图标

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip icon="logo_ag" text="我是小片" />
    </linear>
</ui>

iconTint - 图标颜色

设置图标颜色

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip icon="ic_delete" iconTint="#FF0000" text="我是小片" />
    </linear>
</ui>

textColor - 文本颜色

设置文本颜色

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip textColor="#518855" text="我是小片" />
    </linear>
</ui>

textSize - 文本尺寸

设置文本尺寸

单位:sp

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip textSize="11" text="字体:11" />
        <chip textSize="16" text="字体:16" />
    </linear>
</ui>

radius - 弧度

设置弧度

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip radius="11" text="弧度:11" />
        <chip radius="16" text="弧度:16" />
    </linear>
</ui>

checkable - 是否可以选中

设置是否可以选中

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip checkable="true" text="可选中" />
        <chip text="未选中" />
    </linear>
</ui>

showCheckIcon - 是否显示选中图标

是否显示选中图标

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip checkable="true" showCheckIcon="true" text="可选中" />
        <chip text="未选中" />
    </linear>
</ui>

checkIconTint - 选中图标颜色

设置选中图标颜色

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip checkable="true" checkIconTint="#518855" showCheckIcon="true" text="可选中" />
        <chip text="未选中" />
    </linear>
</ui>

clickable - 是否可以点击

设置是否可以点击

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip clickable="true" text="可点击" />
        <chip clickable="false" text="不可点击" />
    </linear>
</ui>

showCloseIcon - 是否显示关闭按钮

是否显示关闭按钮

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip showCloseIcon="true" text="显示关闭按钮" />
    </linear>
</ui>

closeIconTint - 关闭按钮的颜色

设置关闭按钮的颜色

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip showCloseIcon="true" closeIconTint="#FF0000" text="显示关闭按钮" />
    </linear>
</ui>

ripper - 涟漪颜色

设置涟漪颜色

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip ripper="#518855" text="涟漪颜色" />
    </linear>
</ui>

color - 主题颜色

设置主题颜色

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip color="#518855" text="小片" />
        <chip color="#B44A4A" text="小片" />
        <chip color="#3574F0" text="小片" />
    </linear>
</ui>

minW - 最小宽度

设置最小宽度

单位:dp

<chip minW="100" />

minH - 最小高度

设置最小高度

单位:dp

<chip minH="100" />

padding - 内边距

设置内边距

单位:dp

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center">
        <chip padding="5" text="内边距:5" />
        <chip padding="25" text="内边距:25" />
    </linear>
</ui>

二、常用函数

check(checked)

设置选中状态

  • 参数 : checked {boolean} 选中状态

//解析布局,获取ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mChip = ui.id("mChip");
//设置选中状态
mChip.check(true);

isChecked()

判断是否选中

  • 返回 : {boolean} 是否选中

//解析布局,获取ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mChip = ui.id("mChip");
//获取选中状态
let is = mChip.isChecked();
if (is) {
    toast("选中");
}else{
    toast("未选中");
}

onClose(callback)

监听关闭事件

  • 参数 : callback {(view)=>{}} 关闭回调

//解析布局,获取ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mChip = ui.id("mChip");
//监听关闭事件
mChip.onClose((v)=>{
    //我被关闭了
});

onCheck(callback)

监听选中事件

  • 参数 : callback {(isChecked)=>{}} 选中回调

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

setText(text)

设置文本

  • 参数 : text {string} 文字

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

getText()

获得文本

  • 返回 : {string} 文字

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