Flutter项目开发实战(AI助学)-课后习题及答案 3_第1页
Flutter项目开发实战(AI助学)-课后习题及答案 3_第2页
Flutter项目开发实战(AI助学)-课后习题及答案 3_第3页
Flutter项目开发实战(AI助学)-课后习题及答案 3_第4页
Flutter项目开发实战(AI助学)-课后习题及答案 3_第5页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

PAGEPAGE2【课后练习】一、单选题1.以下关于有状态组件和无状态组件的说法,正确的是?(C)。A.有状态组件和无状态组件在运行过程中状态都不可改变。B.无状态组件继承自StatefulWidget类。C.有状态组件可在运行中改变自身状态,无状态组件创建后状态不可变。 D.无状态组件常用于展示动态内容。2.若要将多个子组件垂直排列,应使用以下哪个组件?(B)。A.Row B.ColumnC.Wrap D.Stack3.想要为组件添加内边距,可使用以下哪种方式?(C)。A.使用SizedBox组件B.设置组件的margin属性C.设置组件的padding属性D.使用Align组件二、填空题1.组件的三种定义方式分别是类定义方式、函数定义方式和__匿名函数定义方式____。2.ListView组件用于创建__列表___布局,可垂直或水平排列子组件且支持滚动。3.若要为组件设置背景渐变和圆角效果,可使用decoration属性并结合____BoxDecoration___类。三、简答题1.简述有状态组件和无状态组件的区别及适用场景?答:区别如下。状态变化:有状态组件在运行过程中可以改变自身状态,当状态改变时,Flutter会自动重新构建该组件以更新界面显示;无状态组件一旦创建,其状态就不会再发生变化,若界面需要更新,通常会创建一个新的无状态组件实例来替换旧的实例。继承类:有状态组件继承自StatefulWidget类,并且需要创建一个对应的State类来管理组件的状态;无状态组件继承自StatelessWidget类。适用场景如下。有状态组件适用于需要动态更新界面的场景,如计数器、实时数据展示等,这些场景中组件的状态会随着用户操作或外部数据的变化而改变。无状态组件适用于展示静态内容的场景,如固定的文本、图片等,这些内容在界面显示过程中不会发生变化。2.请说明Container组件的作用及常见属性。答:Container组件是一个常用的容器布局,它可以包含一个子组件,并且可以对这个子组件进行尺寸、样式等方面的设置,起到包裹和修饰子组件的作用。常见属性包含。width和height:用于设置容器的宽度和高度。color:设置容器的背景颜色。margin:设置容器与其他组件之间的外边距。padding:设置容器内部子组件与容器边缘的内边距。decoration:用于为容器添加更复杂的背景装饰,如渐变、边框、圆角等。foregroundDecoration:添加在子组件前面的装饰,会覆盖在子组件之上。alignment:设置子组件在容器内的对齐方式。解释Stack组件和Positioned组件的关系及使用场景。答:关系如下所示。Stack组件用于将子组件堆叠在一起,后面的组件会覆盖前面的组件;而Positioned组件通常与Stack组件一起使用,它的作用是在Stack组件中对其子组件进行绝对定位,通过设置top、bottom、left、right等属性来指定子组件的位置。使用场景如下:Stack组件适用于需要将多个组件叠加显示的场景,例如在图片上添加文字说明、在图标上显示未读消息数量等。Positioned组件在需要精确控制子组件在Stack中位置的场景中发挥作用,比如创建复杂的布局,需要将某些组件放置在特定的坐标位置时,就可以使用Positioned组件来实现。【综合实训】制作新闻列表页一、实训目的1.掌握JavaScript中语句的用法。2.掌握JavaScript的变量使用方法。3.掌握JavaScript中函数的使用方法。二、实训内容1.创建一个空的HTML模板(1)打开VScode编辑器,新建一个index.html。(2)通过快捷键创建HTML模板。2.创建JavaScript变量和函数(1)准备一个数组变量,数组里面是很多对象,一个对象代表一个用户,对象中包括姓名、年龄、职业等字段。(2)定义一个函数,函数中对用户变量进行遍历和判断,当用户年龄小于等于30岁时,将该用户信息输出到页面。(3)调用函数并执行。3.预览页面(1)鼠标右键选择在浏览器中打开查看效果。<!DOCTYPEhtml><html><head><title>用户列表页面</title></head><body><script>constuserList=[{name:'张三',age:20,job:'工程师'},{name:'李四',age:25,job:'设计师'},{name:'王五',age:18,job:'项目经理'},{name:'赵六',age:35,job:'项目经理'},{name:'钱七',age:40,job:'工程师'},{name:'孙八',age:22,job:'设计师'},{name:'周九',age:32,job:'项目经理'},{name:'吴十',age:43,job:'工程师'},];functionfilterAge(){userList.forEach((user)=>{if(user.age<=30){constuserNode=document.createElement('p');userNode.innerHTML=`${}-${user.age}-${user.job}`;document.body.appendChild(userNode);}});}filterAge();</script></body></html>【实战演练】制作网站导航页制作网站导航的网页,我们首先创建一个HTML模板页面,在页面上有一个下拉框,下拉框中有百度、网易、腾讯等几个选项。接着在下拉框的下方有一个去官网首页的按钮,当点击按钮时根据下拉框中选中的值跳转到不同的网页。效果如图1所示。图1网站导航页效果图实现步骤如下所示。创建空的HTML模板。(2)用<h1>标签插入一个标题。(3)用<div>标签作为内容区域,并设置类名为“dropdown”。(4)用<label>标签作为下拉框文本提示语,并“for”属性为“dropdown”。(5)用<select>标签制作一个下拉选择框并添加3个选项,每一个选项分别设置不同的“value”属性,同时给选择框加上“id”属性为“dropdown”。(6)用<button>标签插入一个按钮,按钮文案为“去官网首页”,并给按钮添加onclick事件,点击时调用“goToHomePage”函数。(7)编写“goToHomePage”函数,获取“id”属性为“'dropdown'”的下拉框选中的值,根据值的不同跳转到不同的网页。<!DOCTYPEhtml><html><head><title>网站导航</title><style>body{text-align:center;}.dropdown{margin-top:50px;}.button{margin-top:20px;}</style><script>functiongoToHomePage(){vardropdown=document.getElementById('dropdown');varselectedValue=dropdown.value;if(selectedValue==='baidu'){window.location.href='';}elseif(selectedValue==='wangyi'){window.location.href='';}elseif(selectedValue==='tencent'){window.location.href='';}}</script></head><body><h1>网站导航</h1><divclass="dropdown"><labelfor="dropdown">选择一个网站:</label><selectid="dropdown"><optionvalue="baidu

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论