小学信息技术 课件教案 6年级下册 课时12-第二单元-羊城新八景-界面布局与屏幕切换-课件

1、六年级广州版信息技术第二单元广州市越秀区署前路小学 严佩宜第13课 羊城新八景界面布局与屏幕切换学习的主要内容1.增加屏幕2.“标签”组件的使用3.界面布局的使用4.屏幕的切换“羊城新八景”应用程序 点击首页的景点按钮，就能切换到相应的景点介绍页面。点击返回按钮又能回到首页。 思考：“羊城新八景”程序有什么功能？实现这些功能需要解决哪些问题？任务分析任务一：新建项目、增加屏幕Screen1是首页，新增一个“Screen”对应一个景点，如： Screen1 首页 Screen2 古祠流芳任务一：新建项目、增加屏幕Screen2为了显示8个景点的介绍内容，首先要增加屏幕。屏幕的标识名称是“Scre

2、en”。Screen1任务一：新建项目、增加屏幕注意：屏幕名称只能字母、数字和下划线，且一定要字母开头。屏幕名称一旦命名确定后就不能修改了。我们接下来无论是组件还是逻辑设计时都要注意当前是在哪个屏幕。标题文字各个景点的图片按钮木棉仔的图片任务二：对每个屏幕进行组件设计（1）Screen1的组件设计标题文字任务二：对每个屏幕进行组件设计（1）Screen1的组件设计标签：显示文字 任务二：对每个屏幕进行组件设计（1）Screen1的组件设计任务二：对每个屏幕进行组件设计（1）Screen1的组件设计轻松逛花市羊城新八景如何使两个组件并排？任务二：对每个屏幕进行组件设计（1）Screen1的组件设

3、计“界面布局”类组件：水平布局如何使两个组件并排？任务二：对每个屏幕进行组件设计（1）Screen1的组件设计如何使按钮组件以表格形式排列？任务二：对每个屏幕进行组件设计（1）Screen1的组件设计如何使按钮组件以表格形式排列？任务二：对每个屏幕进行组件设计（1）Screen1的组件设计“界面布局”类组件：表格布局 水平对齐：“居中：3” 标 题： 首页 图 标： logo.jpg任务二：对每个屏幕进行组件设计（1）Screen1的组件设计步骤一：设置Screen1属性。请暂停播放，完成操作后再继续。任务二：对每个屏幕进行组件设计（1）Screen1的组件设计步骤二：设计界面，添加“水平布局

4、”和“表格布局”并设置属性。表格布局默认为2行2列，我们可以直接在属性更改行列数。表格内部的框线是暂时看不到的。布局组件布局组件属性水平布局1表格布局1请暂停播放，完成操作后再继续。任务二：对每个屏幕进行组件设计（1）Screen1的组件设计步骤三：在“水平布局1”中添加“图像”和“标签”组件，并重命名和设置属性。组件名称组件属性请暂停播放，完成操作后再继续。任务二：对每个屏幕进行组件设计（1）Screen1的组件设计图像按钮属性第一，表格里的是按钮不是图片。任务二：对每个屏幕进行组件设计（1）Screen1的组件设计第二，注意按钮组件定位在哪个单元格任务二：对每个屏幕进行组件设计（1）Scr

5、een1的组件设计步骤四：在“表格布局1”中添加“按钮”组件，并重命名和设置属性。组件名称组件属性古祠流芳按钮1图像：1gslf.png越秀风华按钮2图像：2yxfh.png云山叠翠按钮3图像：3ysdc.png湿地唱晚按钮4图像：4sdwc.png科城锦绣按钮5图像：5kcjx.png塔耀新城按钮6图像：6tyxc.png荔湾胜景按钮7图像：lwsj.png珠光流水按钮8图像：zgls.png请暂停播放，完成操作后再继续。小知识：水平布局、垂直布局和表格布局可互相嵌套， 组合多种布局效果。小知识：水平布局、垂直布局和表格布局可互相嵌套， 组合多种布局效果。任务二：对每个屏幕进行组件设计（2）

6、Screen2的组件设置。切换到“Screen2”，将标题设为“景点介绍”。任务二：对每个屏幕进行组件设计（2）Screen2的组件设计。请暂停播放，完成操作后再继续。水平对齐：居中：3；宽度：充满字号：28；文本：古祠流芳；文本颜色：红色水平对齐：居中：3；宽度：充满水平对齐：居中：3；宽度：充满水平对齐：居右：2；宽度：充满图片：1gclf.png文本：文本：返回屏幕位置内容组件功能Screen1第一部分图片、标题文字水平布局+图像、标签图文并茂的标题第二部分八张图片表格布局+8个按钮以表格方式排列8个图片按钮Screen2第一行标题文字水平布局+标签居中显示标题文字第二行图片水平布局+图

7、像居中显示景点图片第三行简介水平布局+标签居中显示简介文字第四行返回水平布局+按钮右边显示返回按钮思考：如何实现屏幕的切换呢？任务三：完成首页与景点页面切换的逻辑设计当 被点击，屏幕 。古祠流芳按钮跳转到Screen2当 被点击，屏幕 。返回按钮跳转回Screen1思考：如何实现屏幕的切换呢？任务三：完成首页与景点页面切换的逻辑设计当按钮被点击屏幕跳转到另一屏幕任务三：完成首页与景点页面切换的逻辑设计“控制”内置块字符串文本代码块当按钮被点击屏幕跳转到另一屏幕注意：1.确定屏幕名称输入正确。任务三：完成首页与景点页面切换的逻辑设计注意：1.确定屏幕名称输入正确。2.要确认当前是在哪个屏幕。任务

8、三：完成首页与景点页面切换的逻辑设计请暂停播放，完成操作后再继续。 继续增加七个景点对应的屏幕，参考Screen2设计组件、编写程序，并进行测试。实现点击Screen1中任一景点就能切换到该景点的效果。任务四：完成“羊城新八景”项目首页Screen1古祠流芳Screen2越秀风华Screen3云山叠翠Screen4湿地唱晚Screen5科城锦绣Screen6塔耀新城Screen7荔湾胜景Screen8珠光流水Screen9请暂停播放，完成操作后再继续。拓展任务：综合应用所学内容，完善和丰富“羊城新八景”项目。补充更多的“羊城新八景”的图片，更加全面地展示“羊城新八景”的魅力。补充景点交通、游览要点等详细攻略，提高APP的实用性。设计更多的介绍广州文化的APP，如红色文化之旅、美食之旅、艺术之旅、传统文化之旅等等，更好地展示广州的文化魅力。“羊城新八景”的开发设计1、新建项目2、增加屏幕3、组件设计Screen1水平布局图片、标签表格布局按钮Screen2水平布局标签、图片、按钮4、逻辑设计Screen1Screen25、连接调试总结功能问题解决方法1、有多个画面如何增加多个画面呢？增加屏幕“Screen”2、首页上图文并茂如何在屏幕上显示标题文字？“标签”组件3、首页的景点图片按钮以田字格形式排列如何使图片摆放得像表格一样？“表格布局”组件4、点击图片按钮跳转不同的画