资源简介 (共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.拼代码一、新建项目四、连接测试huashiApp制作轻松逛花市03组件设计二、组件设计三、逻辑设计1.找组件2.拖组件3.改名称4.设属性1.找代码2.拼代码一、新建项目四、连接测试huashiApp制作轻松逛花市点击按钮出现对应的图片所需组件所需组件二、组件设计三、逻辑设计1.找组件2.拖组件3.改名称4.设属性1.找代码2.拼代码一、新建项目四、连接测试huashiApp制作轻松逛花市“组件设计”过程组件设计应用名称: 轻松逛花市标题: 轻松逛花市背景图片: beijing.png1.屏幕组件 属性水平对齐: 居中应用说明:图标: tubiao.jpg通过点击按钮浏览图片2.按钮组件属性组件设计重命名:文本:文本对齐: 居中天河花市按钮海珠花市按钮荔湾花市按钮天河花市海珠花市荔湾花市3.图像组件属性组件设计高度: 60比例宽度: 充满图片:tianhe.jpghaizhu.jpgliwan.jpg图像组件属性图片:tianhe.jpghaizhu.jpgliwan.jpg上传方式一:上传方式二:图片的文件名只能包含英文、数字和特殊字符。组件设计1.找组件分析作品2.拖组件从组件面板拖到工作面板3.改名称根据组件的作用和功能4.设属性根据组件呈现的效果小结:04逻辑设计二、组件设计三、逻辑设计1.找组件2.拖组件3.改名称4.设属性1.找代码2.拼代码一、新建项目四、连接测试huashiApp制作轻松逛花市点击按钮出现对应的图片是显示图片否按钮是否点击显示天河花市图片是否天河花市按钮是否点击二、组件设计三、逻辑设计1.找组件2.拖组件3.改名称4.设属性1.找代码2.拼代码一、新建项目四、连接测试huashiApp制作轻松逛花市输入图片文件名注意参数设置“逻辑设计”过程逻辑设计逻辑设计相同代码块可以复制后再修改相应的参数。逻辑设计1.找代码2.拼代码分析逻辑关系 画流程图注意参数设置小结:05连接测试二、组件设计三、逻辑设计1.找组件2.拖组件3.改名称4.设属性1.找代码2.拼代码一、新建项目四、连接测试huashiApp制作轻松逛花市作品测试演示组件设计逻辑设计图片文件名不完整,缺少后缀名.jpg 。增加按钮和图片改变按钮背景颜色改变按钮文本颜色优化作品06课堂总结二、组件设计三、逻辑设计App制作设置Screen1屏幕属性设置按钮组件属性设置图像组件属性一、新建项目四、连接测试轻松逛花市使用按钮、图像、文本代码块编写程序并测试huashi07练一练1. 在进行huashi项目的组件设计时,要使按钮组件和图像组件都位于屏幕居中位置,应该设置( )。A. 按钮和图像组件的“文本对齐”属性为“居中”B. Screen1屏幕的“水平对齐”属性为“居中”C. 鼠标拖动按钮和图像组件至屏幕中间B2. 使用图像组件时,如果图像组件不能完整显示图片,应该设置图像组件的( )。A. 宽度、高度属性B. 图片属性C. 旋转角度属性A3.在进行huashi项目的逻辑设计时,要显示文件名为“tianhe.jpg”的图片,应在文本代码块 内写入( )。A. tianheB. tianhe.jpgC. tianhejpgB08动手实践毕业相册家庭相册谢谢观看12.轻松逛花市答疑课学生提问问题1:按钮的属性已经设置成居中了,为什么在屏幕中还是居左呢?Screen1的“水平对齐”方式应设为“居中”。问题1:按钮的属性已经设置成居中了,为什么在屏幕中还是居左呢?回答1:要使组件位于屏幕的居中位置,必须把屏幕Screen1的水平对齐属性设为居中。学生提问问题2:三个按钮已全部重命名,为什么按钮上没有显示呢?按钮组件的“名称”。按钮显示的“文本”内容。按钮显示文本要在“文本”输入框中输入。问题2:三个按钮已全部重命名,为什么按钮上没有显示呢?回答2:要区分按钮组件名称和按钮显示文本,按钮组件名称通过“重命名”的方式设置,按钮显示文本则通过按钮组件属性的“文本”输入框来设置。学生提问问题3:图片文件名全部正确,为什么荔湾花市图片不显示?此参数应设为“图片”。单击“下拉”按钮,选择合适的参数。问题3:图片的对应的文件名全部正确,为什么荔湾花市图片不显示?回答3:进行逻辑设计时,需要设置参数的代码要通过单击下拉按钮设置参数,根据实际情况选择相应的参数。学生提问问题4:如何改变按钮背景颜色和按钮文本颜色呢?单击按钮组件属性中“背景颜色”设置按钮的“背景颜色”。单击按钮组件属性中“文本颜色”,设置按钮的“文本颜色”。问题4:如何改变按钮背景颜色和按钮文本颜色呢?回答4:通过设置按钮组件属性中的“背景颜色”来改变按钮背景颜色;通过设置按钮组件属性中的“文本颜色”来改变按钮文本颜色。答疑总结:1.注意各组件属性的设置;2.注意各代码参数的设置。谢谢观看 展开更多...... 收起↑ 资源预览