版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
PAGEPAGE2【课后练习】一、单选题1、在TextStyle中，用于设置文字大小的属性是？(B)。A.fontWeightB.fontSizeC.fontStyle D.color2、在ButtonStyle中，设置按钮不可用时背景颜色的属性是？(B)。A.colorB.disabledColorC.highlightColorD.textColor3、若要为文本添加下划线装饰，应使用TextStyle的哪个属性？(A)。A.decoration B.decorationColorC.decorationStyle D.background二、填空题1、TextStyle中用于设置字母之间间距的属性是__letterSpacing____。2、ButtonStyle中设置按钮最小宽度的属性是__minWidth___。3、布局样式设置前景装饰的属性是__foregroundDecoration__。三、简答题1.简述TextStyle中decoration、decorationColor和decorationStyle三个属性的作用及关系？答：关系如下所示。decoration属性用于为文本添加线性装饰，常见取值有TextDecoration.none（无装饰）、TextDecoration.underline（下划线）、TextDecoration.overline（上划线）和TextDecoration.lineThrough（删除线），它决定了是否添加装饰以及添加何种类型的装饰。decorationColor属性用于设置文字线性装饰的颜色，比如将下划线设置为红色等。decorationStyle属性用于设置文字线性装饰的样式，常见取值有TextDecorationStyle.solid（实线）、TextDecorationStyle.dotted（虚线）、TextDecorationStyle.dashed（破折线）和TextDecorationStyle.double（双实线）。这三个属性相互配合，decoration确定装饰类型，decorationColor确定装饰颜色，decorationStyle确定装饰样式，共同决定了文本装饰的最终效果。2.说明ButtonStyle中textColor和disabledTextColor的区别？答：textColor是设置按钮正常可点击状态下文本的颜色，当按钮处于可操作状态时，文本会显示为textColor所设置的颜色。disabledTextColor是设置按钮不可用（未点击且处于禁用状态）时文本的颜色。当按钮由于某些原因被禁用，无法进行点击操作时，文本会显示为disabledTextColor所设置的颜色。这两个属性的设置可以让用户清晰地区分按钮的可操作和不可操作状态。3.请举例说明如何使用TextStyle和ButtonStyle来优化界面设计。答：在一个视频网站的个人中心界面中。TextStyle的使用：对于用户昵称，可以使用TextStyle进行如下设置。Text('用户昵称',style:TextStyle(fontSize:20,fontWeight:FontWeight.bold,color:Colors.blue),)这样设置后，昵称文字会以较大的字体、加粗的样式和蓝色显示，在界面中更加突出，吸引用户的注意力。对于一些提示性的文字，如“上次登录时间”，可以设置为较小的字体和较淡的颜色：Text('上次登录时间：2024-10-01',style:TextStyle(fontSize:12,color:Colors.grey),)ButtonStyle的使用：对于“我的收藏”按钮，可以设置如下样式。ElevatedButton(onPressed:(){},style:ButtonStyle(backgroundColor:MaterialStateProperty.all(Colors.green),foregroundColor:MaterialStateProperty.all(Colors.white),shape:MaterialStateProperty.all(RoundedRectangleBorder(borderRadius:BorderRadius.circular(10)))),child:Text('我的收藏'))此按钮会有绿色的背景、白色的文字和圆角边框，整体视觉效果更好，增强了用户点击的欲望。通过这些样式设置，可以使界面更加美观、清晰，提升用户体验。【综合实训】制作穿梭框功能组件一．实训目的1.掌握JavaScript数组方法的使用2.掌握JavaScript中字符大小写转换使用方法二．实训内容1.创建一个空的HTML模板（1）打开VScode编辑器，新建一个index.html。（2）通过快捷键创建HTML模板。2.创建页面布局 （1）使用“<div>”标签作为整个穿梭框区域的容器。 （2）使用“<select>”标签分别创建穿梭框左边和右边的容器，为左右两边的“select”分别用“<option>”标签创建一些选项，同时设置好“option”的“value”属性。 （3）使用"<div>"标签创建一个按钮容器，用“<button>”标签创建两个带左右箭头的按钮。3.设置页面样式 （1）给容器设置flex布局，让整个穿梭框居中显示。 （2）给button容器添加“flex”布局属性，并设置方向属性，让按钮垂直显示，同时设置左右外边距为10px。 （3）给select标签设置宽高属性。2.创建JavaScript变量和函数（1）为两个按钮监听点击事件，当点击时触发移动函数。（2）创建一个移动“option”选项的函数，获取到当前选中的选项，同时判断当前移动的方向，将option选项的文本设置转换成大写或小写，并将转换好的选项添加到目标“select”标签下。3.预览页面（1）鼠标右键选择在浏览器中打开。（2）选中选择框中的选项。（3）点击点击箭头按钮将选项左右移动。<!DOCTYPEhtml><html><head><title>穿梭框功能组件</title><style>.transfer-box{display:flex;justify-content:center;align-items:center;}select{width:200px;height:200px;}.buttons{display:flex;flex-direction:column;margin:010px;}button{margin-bottom:10px;width:30px;}</style></head><body><divclass="transfer-box"><selectid="left-select"multiple><optionvalue="left-1">aaa</option><optionvalue="left-2">bbb</option><optionvalue="left-3">ccc</option><optionvalue="left-4">ddd</option></select><divclass="buttons"><buttonid="to-right-btn">></button><buttonid="to-left-btn"><</button></div><selectid="right-select"multiple><optionvalue="right-1">eee</option><optionvalue="right-2">fff</option><optionvalue="right-3">ggg</option><optionvalue="right-4">hhh</option></select></div><script>constleftSelect=document.getElementById('left-select');constrightSelect=document.getElementById('right-select');consttoRightButton=document.getElementById('to-right-btn');consttoLeftButton=document.getElementById('to-left-btn');toRightButton.addEventListener('click',function(){moveOptions(leftSelect,rightSelect,'left');});toLeftButton.addEventListener('click',function(){moveOptions(rightSelect,leftSelect,'right');});functionmoveOptions(source,destination,direction){constselectedOptions=Array.from(source.selectedOptions);selectedOptions.forEach((option)=>{option.text=direction==='left'?option.text.toUpperCase():option.text.toLowerCase();destination.appendChild(option);});}</script></body></html>【实战演练】制作会动的时钟制作一个时钟，创建一个HTML模板页面，在页面上实时展示当前的时间，精确到秒，并且时间每秒都在变化。效果如图1所示。图1时钟页效果图实现步骤如下所示。创建空的HTML模板。（2）用<div>标签作为容器，设置id属性为clock，设置class类名为clock、（3）设置clock类的字体大小、字体加粗、文本居中对齐和顶部边距等样式。（4）设置updateClock的函数，首先获取id为clock的DOM节点，随后用JavaScript获取当前时间的时分秒，如果数字小于10，则在数字前面补0。将时分秒用“：”拼接完成后替换给id为clock的DOM元素的文本。（5）开启一个定时器，每一秒调用一次updateClock函数，实现时间在更新的效果。<!DOCTYPEhtml><html><head><title>实时时钟</title><style>.clock{font-size:48px;font-weight:bold;text-align:center;margin-top:200px;}</style><script>functionupdateClock(){varclockElement=document.getElementById('clock');varcurrentTime=newDate();varhours=currentTime.getHours();varminutes=currentTime.getMinutes();varseconds=currentTime.getSeconds();hours=(hours<10?'0':'')+hours;minutes=(minutes<10?'0':'')+minut
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 心理学题库及参考答案
- 年产750套液体制氢设备生产项目可行性研究报告
- 2026 年小学秋季开学交通安全专题宣讲课
- 2026 年夏季小学生夏季游泳必须家长陪同安全教育课
- 西双版纳州中级统计师资格考试（统计基础理论及相关知识）能力提高训练试题库及答案(2026年)
- 2026年蔬菜种植技术员病虫害防治题库完整答案
- 2026年凭祥边境合作区卫健系统笔试真题（附答案）
- 2026年公安辅警公共基础考试题库
- 2024硕士研究生考试《教育学》题库综合试题D卷附解析
- Unit 8 Collecting as a hobby Section 3 Expressing and communicating ideas Speaking 知识点详解讲义（自学预习）2026-2027学年沪教版英语七年级上册
- T-CI 1211-2025 地热资源地质专项勘察技术规程
- 2026年福建高考物理试题+解析
- 中医药防治静脉血栓技术指南
- 伺服压力机安全操作规程
- 2025年康达专转本护理题库及答案
- 药物外渗封闭方法图解
- 1完整版本.手拉手模型-课件
- 《直线与圆锥曲线》参考教案
- (完整)广州版小学英语单词分类表
- 八上语文必背古诗文（原文+翻译+考点梳理）
- 英语四级单词4500
评论
0/150
提交评论