第四章 第一个项目：Hello,World!
4.1 项目概述
“Hello, World!”是编程世界的经典入门项目，同样也是App Inventor 2的最佳起点。在本章中，我们将创建一个简单的Android应用，包含一个按钮和一个标签。初始状态标签显示“Hello”，当用户点击按钮时，标签文本将变为“Hello, World!”。
项目功能：
- 界面显示一个标签和一个按钮
- 标签初始显示“Hello”
- 点击按钮后，标签文本更新为“Hello, World!”
4.2 设计用户界面
我们将使用App Inventor的设计器来创建应用界面。
4.2.1 界面设计步骤
- 打开App Inventor，创建新项目，命名为“HelloWorld”。
- 在属性面板修改Screen1标题为“Hello,World!”。
设置 Screen1 的水平对齐和垂直对齐为居中。
从组件面板拖动按钮(Button)和标签(Label)组件到工作面板。
- 选中标签组件，在属性面板修改以下属性：
• 文本(Text)：输入“Hello”
选中按钮组件，在属性面板修改以下属性：
• 文本(Text)：输入“点击我！”
效果图：
4.2.2 最终界面预览
完成上述步骤后，你的界面应类似下图：
提示： 你可以根据自己的喜好调整组件的位置、大小和颜色。只需在属性面板中修改相应的属性即可。
4.3 编写程序逻辑
完成界面设计后，点击右上角的“逻辑设计”按钮，切换到代码块编辑器。
4.3.1 理解事件驱动编程
在App Inventor中，程序逻辑由事件驱动。我们需要告诉应用：
· 当某个事件发生时（如按钮被点击） · 执行什么操作（如改变标签的文本）
4.3.2 添加事件处理代码块
按照以下步骤添加代码块：
- 找到按钮的点击事件块
· 在左侧抽屉中找到“Button1”（如果重命名了按钮，则以你的命名为准）
· 点击展开Button1的块列表
· 找到并拖出
当 Button1.被点击 时事件块
找到设置标签文本的命令块 · 在左侧抽屉中找到“Label1” · 拖出
设 Label1.文本 为命令块
创建文本值块 · 在左侧抽屉中点击“文本”类别 · 拖出一个空白的文本块
“”· 点击“”文本块，输入“Hello, World!”
4.3.3 完整代码块结构
4.4 测试应用
4.4.1 实时测试方法
App Inventor提供了两种实时测试方法：
| 测试方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| AI伴侣（手机App） | 真实设备测试，效果准确 | - | 推荐方式，最接近真实使用 |
| 模拟器 | 无需Android手机 | 运行较慢，可能不完全准确 | 没有Android设备时的替代方案 |
4.4.2 使用AI伴侣测试步骤
- 在手机上安装”MIT AI2 Companion“应用
注：iOS 可以在 App Store 中搜索“MIT App Inventor”，在 iOS 设备上测试，但打包需要付费开发者进行签名，菜单 打包 → iOS Ad Hoc(.ipa)。 在App Inventor中点击 菜单 连接 → AI伴侣
打开手机上的AI伴侣应用，扫描弹出的二维码或输入连接码
- 应用将实时显示在你的手机上
动图示例：
4.4.3 测试流程
- 观察应用初始界面，确认标签显示“Hello”
- 点击“点击我！”按钮
- 确认标签文本更新为“Hello, World!”
4.4.4 打包测试
- 点击 菜单 打包 → 打包为.apk 格式
- 等待打包
- 扫码或点击下载
4.5 扩展练习
掌握了基础版本后，尝试以下扩展练习来巩固学习成果：
练习：添加第二个按钮
| 功能要求 | 实现步骤 | 代码块示例 |
|---|---|---|
| 添加“重置”按钮，点击后标签恢复显示“Hello” | 1. 在设计器中添加第二个按钮 2. 设置按钮文本为“重置” 3. 在代码块中添加对应事件 |
当 Button2.被点击 时 设 Label1.文本 为 “Hello” |
4.6 常见问题与解决方案
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 按钮点击没有反应 | 1. 代码块没有正确连接 2. 没有切换到代码块编辑器进行编程 |
1. 检查代码块是否完整连接 2. 确保在代码块编辑器中添加了事件处理 |
| 应用在手机上无法连接 | 防火墙阻止连接 | 暂时关闭防火墙测试 |
| 标签文本显示不完整 | 1. 标签宽度不够 2. 字体太大 |
1. 调整标签宽度属性 2. 减小字体大小 |
| 代码块编辑器空白 | 1. 浏览器缓存问题 2. 网络连接问题 |
1. 清除浏览器缓存 2. 检查网络连接 |
4.7 项目总结
通过本章的学习，你已经完成了以下里程碑：
- ✅ 创建了第一个App Inventor项目
- ✅ 掌握了界面设计器的基本使用
- ✅ 理解了事件驱动编程的概念
- ✅ 学会了使用代码块编辑器
- ✅ 掌握了实时测试应用的方法
- ✅ 了解了如何扩展和修改应用功能
核心概念回顾：
· 组件：构成应用界面的基本元素（如标签、按钮） · 属性：组件的特征（如文本、颜色、大小） · 事件：用户操作或系统触发（如按钮点击） · 代码块：图形化的编程指令 · 实时测试：立即在设备上查看应用效果 · 打包测试：打包进行测试，便于反复使用或分享
完成这个项目后，你已经迈出了App Inventor编程的第一步。在接下来的章节中，我们将学习更复杂的组件和编程概念，创建功能更丰富的应用程序。