清泛IT社区App Inventor 2 中文社区

搜索

扫码访问移动社区 移动社区,您的掌上技术专家

关注我,精彩不错过! 关注我,精彩不错过!

扫码安装最新版AI伴侣 最新版AI伴侣v2.76

Aia StoreApp上架指南 .aia 源码一站式解决方案 发布日志AI2连接测试ai2Starter模拟器

AppInventor2离线版中文教育版接入DeepSeek VIP会员 享专有教程,免费赠送基础版*技术支持服务! AI2入门必读中文文档AI2拓展IoT专题

查看: 116|回复: 0
打印 上一主题 下一主题

[经验分享] 用App Inventor 2做扫描仪App?从拍照到展示,手把手教你搭一套完整相机功能 ...

  • TA的每日心情
    开心
    11 小时前
  • 签到天数: 878 天

    [LV.10]以坛为家III

    1243

    主题

    2064

    帖子

    5万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    58751

    AI2中文网VIP弹球达人接水果达人撸猫达人

    跳转到指定楼层
    楼主
    发表于 7 小时前 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
    用App Inventor 2做扫描仪App?从拍照到展示,手把手教你搭一套完整相机功能

    上周有个做社区志愿服务的朋友问我:"能不能用手机拍下老人的健康档案,然后直接在App里分类显示?"他需要一个轻量的、不给老人增加学习成本的拍照分类工具。我说,用App Inventor 2的照相机组件,其实半天就能搭出来。

    当你准备在自己的App里加入拍照功能时,可能会发现一个问题:照相机组件拍完照片之后去哪了?照片怎么用?怎么让拍完的照片立刻显示在界面上?今天这篇教程,就是围绕这三个问题展开的。

    你将学到
    • 照相机(Camera)组件的核心用法:拍照与回调事件
    • 拍完的照片如何显示到Image组件上
    • 照片文件的存储路径管理与复用技巧
    • 结合ImagePicker实现从相册选取的补充方案
    • 一个完整的"拍-显-存"小应用实战

    基础概念

    照相机组件是什么

    照相机(Camera)是App Inventor 2中一个「不可见组件」——你在设计界面上看不到它,但它会在运行时调起系统相机界面。拍照完成后,它会触发 拍摄完成 事件,并把照片的存储路径作为参数传回来。

    核心工作流就三步:调用方法 -> 系统拍照 -> 事件回调拿路径

    [用户点击按钮] -> [Camera1.拍照()] -> [拍照界面] -> [Camera1.拍摄完成(图片路径)]

    与它功能相似的还有摄像机(Camcorder)组件,用来录制视频。两者的区别仅在于一个拍照、一个录像,触发的事件分别是 拍摄完成录制完成

    照片去哪儿了?

    很多新手第一次用Camera组件时会疑惑:明明调用了拍照,拍完照片了,回调事件也触发了,但照片并没有自动出现在App界面上。这是Camera组件的一个重要特性——它只返回文件路径,不负责显示

    你需要把得到的路径主动设置给某个Image组件(图像显示组件)的图片属性,才能在屏幕上看到拍摄的照片。

    逐步实战

    目标:做一个"拍照备忘"小应用——拍一张照片,立即在屏幕上预览,记录一段文字说明,并保存到TinyDB供后续查看。

    Step 1: 界面搭建

    拖入以下组件到Screen:
    • 按钮("拍照") - 触发拍照
    • 图像(Image1) - 显示预览,宽度填满屏幕,高度300px
    • 文本输入框(备注) - 输入文字备忘
    • 按钮("保存") - 存储到TinyDB
    • 标签(状态标签) - 显示操作反馈
    • 照相机(Camera1) - 不可见组件
    • TinyDB(TinyDB1) - 本地存储

    Step 2: 实现拍照逻辑

    切换到逻辑设计视图,拖出积木块:
    1. 当 拍照按钮.被点击 时,执行 Camera1.拍照()
    2. 当 Camera1.拍摄完成 图像位址 时,将图像位址赋值给Image1.图片

    核心积木拼法如下:

    当 按钮_拍照.被点击 执行
      调用 Camera1.拍照()

    当 Camera1.拍摄完成(图像位址) 执行
      设 图像_预览.图片 为 图像位址
      设 标签_状态.文本 为 "照片已拍摄,可以添加备注了"


    Step 3: 保存记录

    点击"保存"按钮时,把照片路径和备注一起存入TinyDB。使用时间戳作为键值:

    当 按钮_保存.被点击 执行
      定义局部变量 tag 为 时钟1.当前时间()
      调用 TinyDB1.存储数据 tag 图像_预览.图片
      调用 TinyDB1.存储数据 tag + "_note" 文本输入框_备注.文本
      设 标签_状态.文本 为 "保存成功"


    这里有个小技巧:用 时钟1.当前时间() 生成的时间戳作键值,天然无重复,而且按时间排序时自然有序。

    Step 4: 从相册选取(ImagePicker补充方案)

    有时候用户不一定要现拍——手机相册里就有合适的照片。这时可以用 图像选择器(ImagePicker) 组件。它本质上是一个类似按钮的组件,点击后打开设备图库,选择照片后自动将路径填入 选中项 属性:

    当 图像选择器1.选择完成 执行
      设 图像_预览.图片 为 图像选择器1.选中项
      设 标签_状态.文本 为 "已从相册选取照片"


    把ImagePicker放在"拍照"按钮旁边,让用户自己选:想现拍就点Camera,想从相册挑就用ImagePicker,体验很顺手。

    常见坑点

    坑1:模拟器/电脑上无法拍照
    Camera组件依赖实体设备的相机硬件,AI伴侣在电脑上运行时会直接闪退或显示黑屏。解决办法:一定要在真机上测试

    坑2:照片不显示
    检查Image1的属性是否设了宽高(默认是「自动」,有时会导致显示异常)。强烈建议给Image组件固定宽高

    坑3:保存到TinyDB后App重启找不到照片
    TinyDB存的是路径字符串,但拍完照的文件位置在某些系统上可能会被回收。建议在生产App里将照片复制到App的专属目录,使用文件管理组件的复制文件方法确保照片长期可用。

    坑4:大分辨率照片卡顿
    系统相机拍的照片分辨率很高,直接设给Image组件时缩放渲染会卡。可以考虑在拍照前先调低手机相机分辨率,或者用扩展组件对图片做压缩处理。

    小结

    照相机组件的核心路线其实就一条:拍照 -> 拿路径 -> 显示/存储。掌握了这个三板斧,你再给它加上文字备注、图片列表浏览、导出分享等功能,一个完整的"拍照备忘"App就成型了。

    更进一步,你可以把Camera和ImagePicker结合使用,让用户有"拍照"和"从相册选"两种途径获取图片。这两条路径的终点都是拿到图片路径,后续逻辑完全复用,代码冗余少、可维护性强。

    如果你在社区里搜"拍照存证""扫描仪""拍照打卡"等关键词,会发现大量App都是基于这个基本框架扩展出来的。下次再有人让你帮忙做个拍照功能的小工具,你知道该怎么做了——从Camera到Image再到TinyDB,三件套搞定。

    参考文档:App Inventor 2 照相机组件 / 图像选择器组件 — fun123.cn
    App Inventor 2 中文网 - MIT同步更新的中文本土化平台!v2.76 支持Android 15 & iOS 更新日志
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    © 2026 tsingfun.com, Inc.  沪ICP备2020034476号-1  沪公网安备31011702000040号

    GMT+8, 2026-07-28 19:46 , Processed in 0.016534 second(s), 32 queries .