App Inventor 2 TableView与SQLite数据展示教程

概述
- App Inventor没有内置TableView
方案一：WebView + HTML表格（推荐）
- HTML模板
- App Inventor积木块
方案二：Table扩展
方案三：动态创建布局
常见问题
- Q1: 表格太宽显示不全？
- Q2: 数据量大时卡顿？
总结

概述

已有文档：sqlite_tutorial.md 介绍了SQLite扩展，dynamic_components.md 介绍了动态创建组件。本文聚焦用表格形式展示数据库内容。

App Inventor没有内置TableView

App Inventor没有原生的表格组件。展示表格数据有以下方案：

方案	难度	排版	推荐度
TableArrangement	⭐	固定行列	⭐⭐
动态创建布局	⭐⭐⭐	灵活	⭐⭐⭐
WebView + HTML表格	⭐⭐	最好	⭐⭐⭐⭐⭐
Table扩展	⭐⭐	好	⭐⭐⭐⭐
ListView	⭐	单列	⭐⭐⭐

方案一：WebView + HTML表格（推荐）

HTML模板

<!-- table_view.html -->
<style>
table { width:100%; border-collapse:collapse; font-size:14px; }
th { background:#4CAF50; color:white; padding:8px; text-align:left; }
td { padding:8px; border-bottom:1px solid #ddd; }
tr:nth-child(even) { background:#f9f9f9; }
tr:active { background:#e0e0e0; }
</style>
<table id="table">
  <thead id="header"></thead>
  <tbody id="body"></tbody>
</table>
<script>
setInterval(function(){
  var msg = window.AppInventor.getWebViewString();
  if(msg && msg !== ""){
    try {
      var data = JSON.parse(msg);
      if(data.cmd === "setData"){
        var cols = data.columns;
        var rows = data.rows;
        document.getElementById('header').innerHTML = '<tr>' + cols.map(function(c){return '<th>'+c+'</th>'}).join('') + '</tr>';
        document.getElementById('body').innerHTML = rows.map(function(row, i){
          return '<tr onclick="selectRow('+i+')">' + cols.map(function(c){return '<td>'+(row[c]||'')+'</td>'}).join('') + '</tr>';
        }).join('');
      }
    } catch(e) { window.AppInventor.setWebViewString("ERROR:"+e.message); }
  }
},100);
function selectRow(i){
  window.AppInventor.setWebViewString("SELECT:"+i);
}
</script>

App Inventor积木块

当 Screen1.初始化
  设 WebView1.主页地址 = "file:///android_asset/table_view.html"
  调用 SQLite1.打开数据库("myapp.db")

当 按钮_加载数据.被点击
  调用 SQLite1.查询SQL("SELECT * FROM users")

当 SQLite1.查询结果(结果)
  设 列名 = ["id", "name", "phone", "email"]
  设 JSON = "{""cmd"":""setData"",""columns"":[\""id\"",\""name\"",\""phone\"",\""email\""]," & _
    """rows"":" & 调用 文本.转JSON(结果) & "}"
  设 WebView1.WebView字符串 = JSON

当 WebView1.WebView字符串改变(值)
  如果 值 以 "SELECT:" 开头
    设 行索引 = 文本转数字(替换文本(值, "SELECT:", ""))
    标签_选中.文本 = "选中第" & (行索引+1) & "行"

方案二：Table扩展

extensions/Table.md 已有文档。基本用法：

当 Screen1.初始化
  调用 Table1.设置列名(["ID", "姓名", "电话", "邮箱"])
  调用 Table1.设置列宽([50, 120, 120, 180])

当 按钮_加载数据.被点击
  调用 SQLite1.查询SQL("SELECT * FROM users")

当 SQLite1.查询结果(结果)
  调用 Table1.清除数据()
  设 i = 1
  当 i ≤ 列表长度(结果)
    设 记录 = 列表第i项(结果)
    调用 Table1.添加行([
      从字典记录获取"id",
      从字典记录获取"name",
      从字典记录获取"phone",
      从字典记录获取"email"
    ])
    设 i = i + 1

方案三：动态创建布局

参考 dynamic_components.md，使用CompCreator扩展：

当 SQLite1.查询结果(结果)
  ' 先清除之前的行
  调用 清除表格()
  
  ' 创建表头
  调用 CompCreator1.创建标签(
    HorizontalArrangement_表头, "header",
    "ID    | 姓名    | 电话    | 邮箱", 14, 黑色, true)
  
  ' 创建数据行
  设 i = 1
  当 i ≤ 列表长度(结果)
    设 记录 = 列表第i项(结果)
    设 显示 = 从字典记录获取"id" & " | " &
      从字典记录获取"name" & " | " &
      从字典记录获取"phone" & " | " &
      从字典记录获取"email"
    调用 CompCreator1.创建标签(
      VerticalArrangement_表格, "row" & i,
      显示, 12, 深灰色, false)
    设 i = i + 1

常见问题

Q1: 表格太宽显示不全？

WebView方案可以设置CSS让表格自适应宽度：

table { width:100%; font-size:12px; }
td { word-break:break-all; }

Q2: 数据量大时卡顿？

分页查询：SELECT * FROM users LIMIT 20 OFFSET 0
使用WebView方案性能最好
避免一次加载上千行

总结

方案	推荐度	性能	适用
WebView + HTML	⭐⭐⭐⭐⭐	好	大数据量
Table扩展	⭐⭐⭐⭐	中	中等数据
动态组件	⭐⭐⭐	差	小数据量

版权声明：MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权，本文档由 ai2claw 🐝 整理。