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

列表

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

列表-ls

原生类型:{androidx.recyclerview.widget.RecyclerView}

列表控件，算的算是一个比较复杂的控件，但是该组件确是最常用的组件之一， 因为它可以用来展示一个列表，比如一个商品列表、一个用户列表、一个消息列表等等。

布局 - 子项布局

设置子项布局

<界面>
    <状态栏 />
    <列表 高="最大" 标识="mLs" 外边距="15" 宽="最大">
        <!-- 列表布局中:用来指定每个子项目的布局 -->
        <布局 宽="最大">
            <!-- 卡片布局:需要配合线性布局来写更好看的界面 -->
            <卡片 外边距="2" 宽="最大">
                <线性布局 方向="横向" 重力="中|left" 内边距="15" 宽="最大">
                    <!-- 这里才是真正显示数据的地方 -->
                    <文字 标识="name" 最小宽度="120" />
                    <文字 标识="age" />
                    <线性布局 重力="中|右" 宽="最大" 权重="1">
                        <按钮 风格="文本" 标识="delBut" 文本="删除" 文本颜色="红色" />
                    </线性布局>
                </线性布局>
            </卡片>
        </布局>
    </列表>
</界面>

定义 界面 = $界面.解析布局("/ui.xml");
界面.显示();
//找到列表控件
定义 列表 = 界面.找控件("mLs");
//绑定解析视图的方法
列表.绑定持有者((子布局, 数据, 位置) => {
    子布局.找控件("name").设置文本("姓名:" + 数据.姓名);
    子布局.找控件("age").设置文本("年龄:" + 数据.年龄);
    子布局.找控件("delBut").点击事件(() => {
        $提示.显示("删除", "确定删除:" + 数据.姓名 + "吗？", () => {
            //列表删除指定下标的元素
            列表.移除(位置);
        });
    });
});
//设置数据
列表.刷新([
    {
        姓名: "张三",
        年龄: 16
    }, {
        姓名: "李四",
        年龄: 18
    }
]);

列数 - 列数

设置列数

当该属性被设置的时候，布局将采用网格布局来添加子项。

<界面>
    <状态栏 />
    <列表 高="最大" 标识="mLs" 外边距="15" 列数="2" 宽="最大">
        <!-- 列表布局中:用来指定每个子项目的布局 -->
        <布局 宽="最大">
            <!-- 卡片布局:需要配合线性布局来写更好看的界面 -->
            <卡片 外边距="2" 宽="最大">
                <线性布局 方向="横向" 重力="中|left" 内边距="15" 宽="最大">
                    <!-- 这里才是真正显示数据的地方 -->
                    <文字 标识="name" 最小宽度="120" />
                    <文字 标识="age" />
                    <线性布局 重力="中|右" 宽="最大" 权重="1">
                        <按钮 风格="文本" 标识="delBut" 文本="删除" 文本颜色="红色" />
                    </线性布局>
                </线性布局>
            </卡片>
        </布局>
    </列表>
</界面>

内边距 - 内边距

设置内边距

<界面>
    <状态栏 />
    <列表 高="最大" 标识="mLs" 内边距="50" 宽="最大">
        <!-- 列表布局中:用来指定每个子项目的布局 -->
        <布局 宽="最大">
            <!-- 卡片布局:需要配合线性布局来写更好看的界面 -->
            <卡片 外边距="2" 宽="最大">
                <线性布局 方向="横向" 重力="中|left" 内边距="15" 宽="最大">
                    <!-- 这里才是真正显示数据的地方 -->
                    <文字 标识="name" 最小宽度="120" />
                    <文字 标识="age" />
                    <线性布局 重力="中|右" 宽="最大" 权重="1">
                        <按钮 风格="文本" 标识="delBut" 文本="删除" 文本颜色="红色" />
                    </线性布局>
                </线性布局>
            </卡片>
        </布局>
    </列表>
</界面>

背景颜色 - 背景颜色

设置背景颜色

<界面>
    <状态栏 />
    <列表 背景颜色="#1E1F22" 高="最大" 标识="mLs" 外边距="15" 宽="最大">
        <!-- 列表布局中:用来指定每个子项目的布局 -->
        <布局 宽="最大">
            <!-- 卡片布局:需要配合线性布局来写更好看的界面 -->
            <卡片 外边距="2" 宽="最大">
                <线性布局 方向="横向" 重力="中|left" 内边距="15" 宽="最大">
                    <!-- 这里才是真正显示数据的地方 -->
                    <文字 标识="name" 最小宽度="120" />
                    <文字 标识="age" />
                    <线性布局 重力="中|右" 宽="最大" 权重="1">
                        <按钮 风格="文本" 标识="delBut" 文本="删除" 文本颜色="红色" />
                    </线性布局>
                </线性布局>
            </卡片>
        </布局>
    </列表>
</界面>

背景图片 - 背景图片

设置背景图片

<界面>
    <状态栏 />
    <列表 外边距="30" 宽="最大" 标识="mLs" 背景图片="/res/bg-ls.png" 高="最大">
        <!-- 列表布局中:用来指定每个子项目的布局 -->
        <布局 宽="最大">
            <!-- 卡片布局:需要配合线性布局来写更好看的界面 -->
            <卡片 外边距="2" 宽="最大">
                <线性布局 内边距="15" 宽="最大" 方向="横向" 重力="中|left">
                    <!-- 这里才是真正显示数据的地方 -->
                    <文字 最小宽度="120" 标识="name" />
                    <文字 标识="age" />
                    <线性布局 宽="最大" 权重="1" 重力="中|右">
                        <按钮 文本="删除" 文本颜色="红色" 标识="delBut" 风格="文本" />
                    </线性布局>
                </线性布局>
            </卡片>
        </布局>
    </列表>
</界面>

滚动到顶部()

滚动到顶部

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//滚动到顶部
列表.滚动到顶部();

滚动到底部()

滚动到底部

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//滚动到底部
列表.滚动到底部();

滚动(位置)

滚动到指定位置

  • 参数 : 位置 {int} 滚动位置

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//滚动到指定位置
列表.滚动(10);

绑定持有者(持有者)

数据绑定

在列表标签中，我没需要设置布局标签设计每个列表子项的布局，而该函数就是用来解析每个子项的布局的。

  • 参数 : 持有者 {(子项持有者, 子项数据, 位置)=>{}} 数据绑定回调

定义 界面 = $界面.解析布局("主界面.xml");
定义 列表 = 界面.找控件("我的列表");//获取列表组件
//开始解析每个数据对应的布局
列表.绑定持有者((子项界面,子项数据,位置)=>{
    //子项界面相当于解析布局节点后返回的界面对象，可以通过这个对象拿到子组件，例如:
    定义 文本 = 子项界面.找控件("我的文本");
    //接下来绑定数据，如果数组每个元素是字符串，则可以直接设置数据
    文本.设置文字(子项数据);
});
//注意:'绑定持有者()'函数也可以写成'解析数据()'函数

刷新(数据)

设置并且刷新数据

  • 参数 : 数据 {obj[]} 数据集合

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//设置并且刷新数据
列表.刷新(["数据1","数据2","数据3"]);

刷新(数据, 位置)

刷新指定位置数据

  • 参数 : 数据 {obj} 数据内容

  • 参数 : 位置 {int} 数据位置

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//刷新指定位置数据
列表.刷新("新数据", 0);

移除(位置)

移除指定位置数据

  • 参数 : 位置 {int} 数据位置

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//移除指定位置数据
列表.移除(0);

添加(数据)

添加一个数据

  • 参数 : 数据 {obj} 数据内容

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//添加一个数据
列表.添加("新数据");

添加(数据, 位置)

添加一个数据到指定位置

  • 参数 : 数据 {obj} 数据内容

  • 参数 : 位置 {int} 插入位置

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//添加一个数据到指定位置
列表.添加("新数据", 0);

清空()

清空列表

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//清空列表
列表.清空();

获取数据()

获取数据

  • 返回 : {obj[]} 数据列表

  • 版本 : 1.7.3

//解析布局,获得界面对象
定义 界面 = $界面.解析布局("./主界面.xml");
//获取控件
定义 列表 = 界面.找控件("我的列表");
//获取数据
定义 数据 = 列表.获取数据();
//打印出来
日志(数据);
ON THIS PAGE