MyListView 拓展：可定制列表

• MyListView 拓展
• 快速开始
  • 最简单的列表（纯文本）
  • 带图标的列表
  • 带图标+双行文字的列表（仿聊天列表）
  • 动态增删
• 三种布局模式
• 方法
  • 初始化
  • 便捷数据方法（推荐）
  • 基础数据方法
  • 缓存
• 事件
  • 列表项事件
  • 图标事件
  • 额外按钮事件
• 属性
  • 状态
  • 列表项外观
  • 图标外观
  • 文字外观
  • 副文本外观
  • 额外按钮
  • 间距
  • 行为
• 完整示例
  • 微信风格聊天列表
  • 设置列表（带额外按钮）
• MyListViewElement 组件
• 注意事项
• 版本信息

« 返回首页

MyListView 拓展

可定制的列表组件，每行支持三种布局模式：

• 纯文本：只有一行文字
• 图标+文本：左侧图标，右侧文字
• 图标+主文本+副文本：左侧图标，右侧双行文字（如微信聊天列表）

额外支持每行右侧的可选按钮（如删除按钮）。

• .aix 拓展下载：

cn.fun123.MyListView.aix

快速开始

最简单的列表（纯文本）

当 Screen1.Initialize 时：
  // 1. 绑定到一个 VerticalArrangement 容器
  调用 MyListView1.Initialize(VerticalArrangement1)

  // 2. 设置纯文本列表
  调用 MyListView1.SetSimpleList([创建列表]("苹果", "香蕉", "橙子", "葡萄"))

当 MyListView1.ElementClick 时：
  设置 Label1.Text 为 "点击了第 " + position + " 项"

带图标的列表

when Screen1.Initialize() {
  MyListView1.Initialize(VerticalArrangement1)
  // 逐项添加图标+文本
  MyListView1.AddIconTextItem("img1.png", "微信")
  MyListView1.AddIconTextItem("img2.png", "QQ")
  MyListView1.AddIconTextItem("img3.png", "微博")
}

带图标+双行文字的列表（仿聊天列表）

when Screen1.Initialize() {
  MyListView1.Initialize(VerticalArrangement1)
  // 添加详细列表项：图标 + 主文本 + 副文本
  MyListView1.AddDetailItem("avatar1.png", "张三", "你好，最近怎么样？")
  MyListView1.AddDetailItem("avatar2.png", "李四", "明天有空吗？")
  MyListView1.AddDetailItem("avatar3.png", "群消息", "王五: 大家好")
}

动态增删

// 在末尾添加一项
MyListView1.AddTextItem("新项目")
// 修改指定位置
MyListView1.SetText(2, "修改后的文本")
// 删除指定位置
MyListView1.RemoveElement(3)
// 获取项数
标签_计数.Text = "共 " + MyListView1.Count() + " 项"
// 清空列表
MyListView1.Clear()

三种布局模式

数据格式决定每行的布局：

便捷方法已自动封装数据格式，直接调用即可。

方法

初始化

Initialize(container)

绑定到 VerticalArrangement 容器

Initialize_Scroll(container)

绑定到 VerticalScrollArrangement 容器（支持滚动）

便捷数据方法（推荐）

SetSimpleList(textList)

设置纯文本列表。传入简单文本列表如 [“A”, “B”, “C”]

AddTextItem(text)

在末尾添加一行纯文本

AddIconTextItem(iconPath, text)

添加带图标的列表项

AddDetailItem(iconPath, mainText, subText)

添加带图标、主文本和副文本的详细列表项

Count()

获取当前列表项数

基础数据方法

Set(list)

设置完整数据列表。列表中每项为一个子列表，子列表长度决定布局

AddElement(element)

在末尾添加一项。element 为子列表

AddEmptyElement()

添加一个空行

SetElement(elementIndex, element)

替换指定位置的数据（从 1 开始）

SetElementText(elementIndex, text)

设置指定位置的文本

SetElementMainText(elementIndex, mainText)

设置主文本

SetElementSubText(elementIndex, subText)

设置副文本

SetElementIcon(elementIndex, path)

设置图标

SetText(elementIndex, text)

设置指定位置的文本（便捷版）

GetText(elementIndex)

获取指定位置的文本

GetElement(elementIndex)

获取指定位置的完整数据（子列表）

Get()

获取完整列表数据

InsertElement(elementIndex, element)

在指定位置插入新项

RemoveElement(elementIndex)

移除指定位置的项

Clear()

清空列表

缓存

ClearCache(path)

清除指定图片的缓存

ClearAllCache()

清除所有图片缓存

事件

列表项事件

ElementClick(elementIndex)

点击列表项时触发。elementIndex 从 1 开始

ElementLongClick(elementIndex)

长按列表项时触发

ElementTouchDown(elementIndex)

手指按下列表项时触发

ElementTouchUp(elementIndex)

手指抬起时触发

图标事件

IconClick(elementIndex)

点击图标时触发

IconLongClick(elementIndex)

长按图标时触发

额外按钮事件

ExtraButtonClick(elementIndex)

点击额外按钮时触发

ExtraButtonLongClick(elementIndex)

长按额外按钮时触发

属性

状态

LastClickedElement

最后点击的列表项索引（只读）

LastClickedIcon

最后点击的图标索引（只读）

LastClickedExtraButton

最后点击的额外按钮索引（只读）

列表项外观

ElementHeight

列表项高度（dp），默认 57

TouchDownColor

按下时的背景色，默认透明

图标外观

IconWidth

图标宽度，默认 40

IconHeight

图标高度，默认 40

IconShape

图标形状（0=默认, 1=圆角, 2=矩形, 3=椭圆）

IconBgColor

图标背景色

IconTextColor

图标文字颜色

IconTextFontSize

图标文字大小，默认 24

IconTextFontBold

图标文字加粗，默认 true

IconMultiParams

图标是否支持多参数（路径

文字），默认 false

文字外观

TextColor

文字颜色，默认黑色

TextFontSize

文字大小，默认 14

TextFontBold

文字加粗，默认 false

TextHeight

文字高度，默认 18

副文本外观

SubTextColor

副文本颜色，默认浅灰

SubTextFontSize

副文本大小，默认 12

SubTextFontBold

副文本加粗，默认 false

额外按钮

ExtraButtonEnabled

是否显示额外按钮，默认 false

ExtraButtonText

额外按钮文字

ExtraButtonImage

额外按钮图片路径

ExtraButtonBgColor

额外按钮背景色

ExtraButtonShape

额外按钮形状

间距

WidthBeforeIcon

图标前间距，默认 7

WidthAfterIcon

图标后间距，默认 5

UnderlineColor

分割线颜色

UnderlineWidth

分割线宽度，默认 1

行为

ScrollBottomAfterAdd

添加后自动滚动到底部，默认 false

AsyncImageLoad

异步加载图片，默认 false

CacheImage

缓存图片，默认 false

完整示例

微信风格聊天列表

when Screen1.Initialize() {
  MyListView1.Initialize(VerticalArrangement1)
  // 设置外观
  MyListView1.ElementHeight = 70
  MyListView1.IconWidth = 48
  MyListView1.IconHeight = 48
  MyListView1.TextFontSize = 16
  MyListView1.SubTextFontSize = 13
  MyListView1.SubTextColor = [灰色]
  MyListView1.UnderlineColor = [浅灰色]
  // 添加数据
  MyListView1.AddDetailItem("wechat.png", "微信团队", "欢迎来到微信！")
  MyListView1.AddDetailItem("filehelper.png", "文件传输助手", "图片")
  MyListView1.AddDetailItem("group.png", "技术交流群(128)", "李四: 收到")
}
when MyListView1.ElementClick(elementIndex) {
  标签1.Text = "打开: " + MyListView1.GetText(elementIndex)
}

设置列表（带额外按钮）

when Screen1.Initialize() {
  MyListView1.Initialize(VerticalArrangement1)
  // 启用额外按钮
  MyListView1.ExtraButtonEnabled = true
  MyListView1.ExtraButtonText = ">"
  MyListView1.ExtraButtonShape = 1  // 圆角
  // 添加带图标的设置项
  MyListView1.AddIconTextItem("wifi.png", "Wi-Fi 设置")
  MyListView1.AddIconTextItem("bluetooth.png", "蓝牙设置")
  MyListView1.AddIconTextItem("sound.png", "声音设置")
}
when MyListView1.ExtraButtonClick(elementIndex) {
  标签1.Text = "点击了第 " + elementIndex + " 项的按钮"
}

MyListViewElement 组件

用于单独控制某个列表项的外观。先通过 LinkToElement 绑定到指定项，然后设置属性。

// 绑定到第 3 个元素并修改其背景色
MyListViewElement1.LinkToElement(MyListView1, 3)
MyListViewElement1.ElementBackgroundColor = [蓝色]
MyListViewElement1.TextColor = [白色]

也提供静态方法直接操作：TextColor(listview, index) 获取、TextColor_(listview, index, color) 设置。

注意事项

• 所有位置索引从 1 开始（App Inventor 风格）
• 图标路径支持本地文件和 URL
• 大量数据（100+）时建议使用 DynamicRecycler 扩展（基于 RecyclerView）
• ExtraButtonEnabled 需要在添加数据前设为 true

版本信息

• 当前版本：11
• 新增：SetSimpleList、AddTextItem、AddIconTextItem、AddDetailItem、SetText、GetText、Count、InsertElement 便捷方法
• 兼容性：App Inventor 2