师：同学们，大家好。今天我们一起来学习六年级广州版信息技术第二单元第12课“轻松逛花市”。每到过年，广州人都有一项传统习俗，大家猜猜是什么？
生：逛花市！
师：没错，就是逛花市。但今年因为疫情，现场花市不能举办了。传统不能丢，怎样才能实现逛花市呢？有位同学利用APP inventor制作了一款“轻松逛花市”APP，我们一起来看看。大家边看边思考，在这个APP中人的行为是什么，手机的反应又是什么？
（同学演示APP）
生：大家好，这是我制作的“轻松逛花市”APP，下面为大家演示一下。点击天河花市按钮，出现天河花市；点击海珠花市按钮，出现海珠花市；点击荔湾花市按钮，出现荔湾花市。
师：通过刚才的视频，我们发现在这个APP中，人的行为是点击按钮，手机的反应是出现对应的图片。那么如何实现点击按钮出现对应的图片呢？今天我们就一起来制作“轻松逛花市”APP，实现这个功能。这节课的学习目标是学会设置Screen，掌握屏幕属性；学会设置按钮组件、图像组件属性；学会使用按钮、图像、文本代码块编写程序并测试。首先我们来复习回顾，在上节课中我们学习制作了一款天气预报APP，大家还记得APP制作的一般流程吗？
生：记得！第一步，新建项目；第二步，组件设计；第三步，逻辑设计；第四步，连接测试。
师：非常好。其中组件设计又包括找组件、拖组件、改名称、设属性；逻辑设计包括找代码、拼代码。
根据以上流程，我们按步骤来完成“轻松逛花市”APP的制作。第一步，新建项目。要制作“轻松逛花市”APP，我们要新建一个名为“花市”的项目。新建项目后，组件列表会自动创建一个名为Screen1的屏幕组件。接下来进入组件设计，在组件设计中第一步是找组件，这个APP需要哪些组件呢？我们一起来分析分析。
生：人点击按钮需要按钮组件。
师：对，找到了相应的组件，我们就要进入拖组件、改名称、设属性环节。下面我们通过一段视频来学习组件设计的全过程。
（播放组件设计视频）
师：组件设计按照如下操作：新建一个“花市”项目，单击项目按钮，单击新建项目，输入项目名称“花市”，单击确定。设置Screen1属性，将应用说明属性设置为“通过点击按钮浏览图片”，将水平对齐属性设置为居中；将应用名称属性设置为“轻松逛花市”，将背景图片属性设置为“背景.png”，将图标属性设置为“图标.jpg”；将标题属性设置为“轻松逛花市”。从组件面板中拖动三个按钮组件到工作面板中，再拖动图像组件到工作面板中。将按钮一重命名为“天河花市按钮”，将按钮二重命名为“海珠花市按钮”，将按钮三重命名为“荔湾花市按钮”。单击“天河花市按钮”，将文本属性设置为“天河花市”，将文本对齐属性设置为居中；单击“海珠花市按钮”，将文本属性设置为“海珠花市”，将文本对齐属性设置为居中；单击“荔湾花市按钮”，将文本属性设置为“荔湾花市”，将文本对齐属性设置为居中。单击图像一，将高度属性设为60%，将宽度属性设为充满，通过图片属性依次上传图片“海珠.jpg”“天河.jpg”“荔湾.jpg”。
通过以上视频，我们学习了组件设计的全过程，我们再来回顾一下视频当中相关组件的属性设置。屏幕组件属性，把应用说明设为“通过点击按钮浏览图片”，水平对齐设为居中，应用名称设为“轻松逛花市”，背景图片上传了“背景.png”图片，图标上传了“图标.jpg”图片，标题设为“轻松逛花市”。按钮组件属性，三个按钮分别重命名为“天河花市按钮”“海珠花市按钮”“荔湾花市按钮”，文本设为“天河花市”“海珠花市”“荔湾花市”，文本对齐方式设为居中。图像组件属性，高度设为60%，宽度设为充满，图片上传了“天河.jpg”“海珠.jpg”“荔湾.jpg”。
图像组件要显示的图片我们有两种上传方式，可以在图片属性中通过上传文件的方式上传，也可以在素材中通过上传文件的方式上传。上传图片的文件名只能包含英文、数字和特殊字符。学习了“花市”项目的组件设计，我们来小结一下，组件设计包括找组件、拖组件、改名称、设属性。其中我们要通过分析作品找到相应的组件，把组件从组件面板拖动到工作面板实现拖组件，根据组件的功能和作用修改名称，根据组件呈现的效果设置属性。接下来我们要进入到逻辑设计中，第一步是找代码，这个APP需要哪些代码呢？我们一起来分析一下。人点击按钮，屏幕出现对应的图片，它们之间存在怎样的逻辑关系？我们可以通过流程图呈现它们背后的逻辑关系。