第12课 轻松逛花市——图像与按钮的使用 课件(76张PPT)+内嵌视频

资源下载
  1. 二一教育资源

第12课 轻松逛花市——图像与按钮的使用 课件(76张PPT)+内嵌视频

资源简介

(共76张PPT)
12.轻松逛花市
广州人过年习俗?
逛花市
人的行为?
思考:
轻松逛花市App
手机的反应?
人的行为
手机的反应
点击按钮
出现对应的图片

学习目标
1.学会设置Screen1屏幕属性;
2.学会设置按钮组件、图像组件属性;
3.学会使用按钮、图像、文本代码块编写程序并测试。
01
复习回顾
01
复习回顾
App制作的一般流程?
二、组件设计
三、逻辑设计
App制作
1.找组件
2.拖组件
3.改名称
4.设属性
1.找代码
2.拼代码
一、新建项目
四、连接测试
02
新建项目
二、组件设计
三、逻辑设计
1.找组件
2.拖组件
3.改名称
4.设属性
1.找代码
2.拼代码
一、新建项目
四、连接测试
huashi
App制作
轻松逛花市
03
组件设计
二、组件设计
三、逻辑设计
1.找组件
2.拖组件
3.改名称
4.设属性
1.找代码
2.拼代码
一、新建项目
四、连接测试
huashi
App制作
轻松逛花市
点击按钮
出现对应的图片
所需组件
所需组件
二、组件设计
三、逻辑设计
1.找组件
2.拖组件
3.改名称
4.设属性
1.找代码
2.拼代码
一、新建项目
四、连接测试
huashi
App制作
轻松逛花市
“组件设计”过程
组件设计
应用名称: 轻松逛花市
标题: 轻松逛花市
背景图片: beijing.png
1.屏幕组件 属性
水平对齐: 居中
应用说明:
图标: tubiao.jpg
通过点击按钮浏览图片
2.按钮组件
属性
组件设计
重命名:
文本:
文本对齐: 居中
天河花市按钮
海珠花市按钮
荔湾花市按钮
天河花市
海珠花市
荔湾花市
3.图像组件
属性
组件设计
高度: 60比例
宽度: 充满
图片:
tianhe.jpg
haizhu.jpg
liwan.jpg
图像组件属性
图片:
tianhe.jpg
haizhu.jpg
liwan.jpg
上传方式一:
上传方式二:
图片的文件名只能包含英文、数字和特殊字符。
组件设计
1.找组件
分析作品
2.拖组件
从组件面板拖到工作面板
3.改名称
根据组件的作用和功能
4.设属性
根据组件呈现的效果
小结:
04
逻辑设计
二、组件设计
三、逻辑设计
1.找组件
2.拖组件
3.改名称
4.设属性
1.找代码
2.拼代码
一、新建项目
四、连接测试
huashi
App制作
轻松逛花市
点击按钮
出现对应的图片

显示图片

按钮
是否点击
显示天河花市图片


天河花市按钮
是否点击
二、组件设计
三、逻辑设计
1.找组件
2.拖组件
3.改名称
4.设属性
1.找代码
2.拼代码
一、新建项目
四、连接测试
huashi
App制作
轻松逛花市
输入图片文件名
注意参数设置
“逻辑设计”过程
逻辑设计
逻辑设计
相同代码块可以复制后再修改相应的参数。
逻辑设计
1.找代码
2.拼代码
分析逻辑关系 画流程图
注意参数设置
小结:
05
连接测试
二、组件设计
三、逻辑设计
1.找组件
2.拖组件
3.改名称
4.设属性
1.找代码
2.拼代码
一、新建项目
四、连接测试
huashi
App制作
轻松逛花市
作品测试演示
组件设计
逻辑设计
图片文件名不完整,缺少后缀名.jpg 。
增加按钮和图片
改变按钮背景颜色
改变按钮文本颜色
优化作品
06
课堂总结
二、组件设计
三、逻辑设计
App制作
设置Screen1屏幕属性
设置按钮组件属性
设置图像组件属性
一、新建项目
四、连接测试
轻松逛花市
使用按钮、图像、文本代码块编写程序并测试
huashi
07
练一练
1. 在进行huashi项目的组件设计时,要使按钮组件和图像组件都位于屏幕居中位置,应该设置( )。
A. 按钮和图像组件的“文本对齐”属性为“居中”
B. Screen1屏幕的“水平对齐”属性为“居中”
C. 鼠标拖动按钮和图像组件至屏幕中间
B
2. 使用图像组件时,如果图像组件不能完整显示图片,应该设置图像组件的( )。
A. 宽度、高度属性
B. 图片属性
C. 旋转角度属性
A
3.在进行huashi项目的逻辑设计时,要显示文件名为“tianhe.jpg”的图片,应在文本代码块 内
写入( )。
A. tianhe
B. tianhe.jpg
C. tianhejpg
B
08
动手实践
毕业相册
家庭相册
谢谢观看
12.轻松逛花市答疑课
学生提问
问题1:
按钮的属性已经设置成居中了,为什么在屏幕中还是居左呢?
Screen1的“水平对齐”方式应设为“居中”。
问题1:
按钮的属性已经设置成居中了,为什么在屏幕中还是居左呢?
回答1:
要使组件位于屏幕的居中位置,必须把屏幕Screen1的水平对齐属性设为居中。
学生提问
问题2:
三个按钮已全部重命名,为什么按钮上没有显示呢?
按钮组件的“名称”。
按钮显示的“文本”内容。
按钮显示文本要在“文本”输入框中输入。
问题2:
三个按钮已全部重命名,为什么按钮上没有显示呢?
回答2:
要区分按钮组件名称和按钮显示文本,按钮组件名称通过“重命名”的方式设置,按钮显示文本则通过按钮组件属性的“文本”输入框来设置。
学生提问
问题3:
图片文件名全部正确,为什么荔湾花市图片不显示?
此参数应设为“图片”。
单击“下拉”按钮,选择合适的参数。
问题3:
图片的对应的文件名全部正确,为什么荔湾花市图片不显示?
回答3:
进行逻辑设计时,需要设置参数的代码要通过单击下拉按钮设置参数,根据实际情况选择相应的参数。
学生提问
问题4:
如何改变按钮背景颜色和按钮文本颜色呢?
单击按钮组件属性中“背景颜色”设置按钮的“背景颜色”。
单击按钮组件属性中“文本颜色”,设置按钮的“文本颜色”。
问题4:
如何改变按钮背景颜色和按钮文本颜色呢?
回答4:
通过设置按钮组件属性中的“背景颜色”来改变按钮背景颜色;通过设置按钮组件属性中的“文本颜色”来改变按钮文本颜色。
答疑总结:
1.注意各组件属性的设置;
2.注意各代码参数的设置。
谢谢观看

展开更多......

收起↑

资源预览