一个「中国大学排名」App,把 App Inventor 布局列表框的本事全用上了

做 App 绕不开列表。新闻、商品、通讯录、聊天记录，说到底都是一行一行往下排。

App Inventor 原来的列表显示框，一行就是一段文字，顶多再配个小图。想做成带校徽、排名、标签、两个按钮的卡片，以前只能用一堆布局手工堆，数据一多就卡。

布局列表框就是为这件事来的。这次我们用它做了一个「中国大学排名及特色」App：2026 软科主榜前 20 所高校，搜索、收藏、两种视图切换、滑到底自动加载，全有。正好拿它把布局列表框从头讲一遍。

布局列表框是中文网独有的组件，这次 v2.80 升级新增了 40 多个好用的内置组件，这个组件尤其重要：

先看效果

打开 App，顶部是标题和搜索框，下面一排操作按钮，再往下就是列表。每一行有校徽、排名、校名、地区和类型、特色方向、总分，下面两个按钮：「查看特色」和「收藏」。

前三名的排名是橙色，其余是蓝色；收藏过的学校，按钮变成浅橙底的「已收藏」。状态栏写着「已显示 20/20 所 · 收藏 5 所 · 已全部加载」。

点「双列卡片」，同一份数据马上换成两列卡片排版，滚动位置和已加载的进度都保留。

 

▲ 双列卡片模式：同一份数据换一个布局列表框（真机截图）

模板：在设计器里把一行搭出来

布局列表框最大的不同是：一行长什么样，你在设计器里直接拖出来。

往布局列表框里放一个竖直布局，这就是行模板。再往模板里放图像、标签、按钮，和平时搭界面一模一样。大学排名的图文模板是这样搭的：

• 竖直布局_模板_列表（白色背景，宽度填充）

• 水平布局_图文：左边校徽图像 + 排名标签，右边校名、地区、特色、总分四个标签

• 水平布局_操作：按钮_详情（显示「查看特色」）、按钮_收藏

布局列表框本身设几个属性就够了：列数 1、方向垂直、行间距 10、背景浅灰蓝，再填一句空提示文本，没有数据时显示它。

双列卡片是另一个布局列表框，列数设成 2，模板把校徽和排名放顶上，组件名都改成「_网格」后缀，避免同一屏重名。

 

▲ 设计器里的行模板与布局列表框属性（真实截图）

运行时，模板只是「模具」，有多少条数据就印出多少行。而且行是回收复用的：屏幕外滑走的行会被拿来装新数据，几千条也不卡。

数据：字典键名对上组件名，自动填

数据怎么进到每一行？布局列表框的规矩很简单：给它一个字典列表，字典的键和模板里的组件名相同，值就自动填进去。标签、按钮填文本，图像填图片。

大学数据放在素材 universities.json 里，用文件管理器读出来，Web 组件解析成字典。然后每所大学做成一行：

 

▲ 每所大学做成一行字典

键「标签_名_列表」对上了组件名，校名就自己出现在那个标签上；「图像_校徽_列表」对上图像，校徽就显示出来。不需要写任何循环去一个个赋值。

键「大学」不对应任何组件，会被忽略，但它跟着这一行走——后面点击、收藏时，从行数据里取出它，就拿到了整条原始记录。

最后把每所大学都做成一行，整个列表交给数据属性：

 

▲ 把整个列表交给数据属性

每行不一样的地方：遍历数据事件

前三名排名要橙色、已收藏的按钮要变样，这种「按数据决定样式」的事，自动绑定做不了，交给遍历数据（索引，值）事件。

每当一行要显示出来，这个事件就触发一次，参数「值」就是这一行的字典。用取组件按组件名拿到这一行里的那个标签或按钮，想怎么改就怎么改：

 

▲ 按数据改每一行的样式

截图里那行「累计绑定 24 次 · 当前：清华大学」就是在这个事件里计数的。你上下滑动，数字会一直涨——这正说明行在被回收复用，每次复用都重新绑定一遍。所以样式一定要每次都按数据设一遍，不能只设「是」的情况，否则复用来的旧行会把上一个学校的颜色带过来。

点击：整行、行内按钮、长按，三种分开

一行里能点的东西不止一个，布局列表框分得很清楚：

• 行点击（索引，值）：点这一行空白处，案例里弹出大学详情对话框，写着排名、总分、地区、特色方向，还附上数据来源。

• 组件点击（标签，索引，值）：点了行里的按钮，参数「标签」就是被点组件的名字。是「按钮_收藏_列表」就切换收藏，是「查看特色」就弹详情。

• 行长按（索引，值）：长按一行也能收藏或取消收藏，给习惯长按的人。

收藏的学校编号存进微数据库，退出再打开还在。切换收藏后调一次刷新方法，当前屏幕的行重新绑定，按钮立刻变成「已收藏」。

滑到底自动加载

20 所学校不是一次全塞进去的。首批 10 所（两列卡片或大屏会按屏幕高度多给几所），手指往上滑，滚到最后一行时触发滚到底部事件，再用追加数据补 5 所，直到 20 所全显示，状态栏变成「已全部加载」。

 

▲ 图文列表模式：校徽、排名、特色、总分，收藏过的显示「已收藏」（真机截图）

追加数据只加新的行，已经显示的不动，滚动位置也不跳。真实项目里换成网络分页接口，就是标准的信息流加载更多。

剩下几个按钮

• 搜索框：按校名、地区、特色方向筛选，输入「北京」，6 所一次全显示；

• 只看收藏：勾上就只剩收藏的；

• 回顶部：滚动到第 1 行；

• 强制刷新：所有可见行重新绑定一遍；

• 清空显示：清空数据，列表显示空提示文本，收藏保留，点「恢复全部」回来。

这几个按钮也正好是布局列表框的一张测试单：数据、追加、清空、刷新、滚动定位、空状态，全覆盖。

自己动手试试

工程是用 ai2-app 技能让 AI 生成的，528 个积木，导入后正式编辑器 0 错误，安卓 APK 编译通过。完整 .aia、APK、20 张校徽和数据来源表都放在文档里：

打开 fun123.cn 的组件文档，找到「布局列表框」使用指导，「实际案例：中国大学排名及特色」一节可以直接下载。导入后连上 AI 伴侣就能跑，不需要任何接口密钥。

如果你只想先感受一下，五分钟就够：拖一个布局列表框，里面放一个竖直布局和两个标签，把一个字典列表设给数据属性，两行就出来了。剩下的，都是在这个基础上往上加。

排名、地区和总分来自 2026 软科中国大学排名主榜，特色方向摘自各校官网和教育部「双一流」建设学科名单，仅作为组件演示用。

好了，是不是很简单，今天的分享就到此结束，咱们下回见；

如果觉得文章对你有帮助，记得点.赞.转.发.收.藏喔！