- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
渲染控制
0102条件渲染循环渲染
条件渲染在ArkUI声明式开发范式中,页面中的组件可以使用if/else条件渲染,以达到根据应用的不同状态,渲染对应状态下的UI内容。条件渲染使用说明:if/else条件语句可以使用状态变量,并且在更新场景下必须使用状态变量。使用if/else可以使子组件的渲染依赖条件语句。必须在容器组件内使用。某些容器组件限制子组件的类型或数量,将if/else用于这些组件内时,这些限制将同样应用于if/else语句内创建的组件。例如Grid容器组件的子组件仅支持GridItem组件。
条件渲染if/else使用示例:@Componentstruct?MyComponent?{??@State?count:?number?=?300??build()?{????Column()?{??????if?(this.count??0)?{????????Text(count?is?negative).fontSize(14)??????}?else?if?(this.count?%?2?===?0)?{????????Text(count?is?even).fontSize(14)??????}?else?{????????Text(count?is?odd).fontSize(14)??????}????}??}}
循环渲染在ArkUI声明式开发范式中,重复出现的组件可以用ForEach循环来迭代渲染,组件需要的数据放在数组中,ForEach在迭代数组时创建相应的组件并传入数据。ForEach语句结构:ForEach(??arr:?any[],???itemGenerator:?(item:?any,?index?:?number)?=?void,??keyGenerator?:?(item:?any,?index?:?number)?=?string?)
循环渲染ForEach参数说明:参数名参数类型必填参数描述arrany[]是必须是数组,允许设置为空数组,空数组场景下将不会创建子组件。同时允许设置返回值为数组类型的函数,例如arr.slice(1,3),设置的函数不得改变包括数组本身在内的任何状态变量,如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。itemGenerator(item:any,index?:number)=void是生成子组件的箭头函数,为数组中的每一个数据项创建一个或多个子组件,单个子组件或子组件列表必须包括在大括号“{...}”中。keyGenerator(item:any,index?:number)=string否匿名函数,用于给数组中的每一个数据项生成唯一且固定的键值。默认使用index+JSON.stringify(item)。为了使开发框架能够更好地识别数组更改,提高性能,建议开发者提供自定义的键值生成器。
循环渲染ForEach使用说明:ForEach必须在容器组件内使用。生成的子组件应当是允许包含在ForEach父容器组件中的子组件。允许子组件生成器函数中包含if/else条件渲染。键值生成器必须针对每个数据生成唯一的值,如果键值相同,将导致键值相同的UI组件被框架忽略,从而无法在父容器内显示。不提供keyGenerator时,默认使用index+JSON.stringify(item)。itemGenerator函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。
循环渲染ForEach使用示例:@Entry@Componentstruct?MyComponent?{??@State?arr:?number[]?=?[10,?20,?30]??build()?{????Column({?space:?5?})?{??????Button(Reverse?Array)????????.onClick(()?=?{??????????this.arr.reverse()????????})??????ForEach(this.arr,?(item:?number)?=?{????????Text(`item?value:?${item}`).fontSize(18)????????Divider().strokeWidth(2).color(Color.Black)??????},?(item:?number)?=?item.toString())????}??}}
您可能关注的文档
- 《HarmonyOS应用开发基础》 课件 知识点1-1-1 HarmonyOS简介.pptx
- 《HarmonyOS应用开发基础》 课件知识点1-1-2 开发前准备.pptx
- 《HarmonyOS应用开发基础》 课件知识点1-2-1 认识TypeScript.pptx
- 《HarmonyOS应用开发基础》 课件知识点1-2-2 TypeScript常用基础数据类型.pptx
- 《HarmonyOS应用开发基础》 课件知识点1-3-1 TypeScript函数.pptx
- 《HarmonyOS应用开发基础》 课件知识点1-3-2 TypeScript面向对象编程.pptx
- 《HarmonyOS应用开发基础》 课件知识点2-1 认识ArkTS工程.pptx
- 《HarmonyOS应用开发基础》 课件知识点2-2 认识ArkTS声明式开发.pptx
- 《HarmonyOS应用开发基础》 课件知识点2-3-1 Row与Column组件的使用.pptx
- 《HarmonyOS应用开发基础》 课件知识点2-3-2 基础组件1.pptx
- 2023-24年浙江舜宇光学有限公司总部社会招聘补招7人模拟试题(共100题)附带答案题库及参考答案.docx
- 2023-24年浙江海氏实业集团有限公司招聘3人高频100题难、易错点模拟试题附带答案王牌题库下载答.docx
- 中国塑料加工设备行业市场调查研究及投资战略研究报告.docx
- 2023-24年浙江海正集团有限公司招聘3人历年(高频重点提升专题训练)附带答案内部题库含答案(满分.docx
- 2023-24年浙江海正集团有限公司招考聘用6人(高频重点提升专题训练)附带答案题库附答案【预热题】.docx
- 2023-24年浙江永利实业集团有限公司应届高校毕业生招聘高频考题难模拟试题附带答案真题(基础题).docx
- 2023-24年浙江海正集团有限公司招考聘用6人(高频重点提升专题训练)附带答案题库附答案【预热题】.docx
- 2023-24年浙江永利实业集团有限公司校园招聘公开引进高层次人才笔试答案内部题库及答案【有一套】.docx
- 2023-24年浙江永利实业集团有限公司校园招聘公开引进高层次人才笔试答案内部题库及答案【有一套】.docx
- 2023-24年浙江航民实业集团有限公司应届高校毕业生招聘高频考题难模拟试题附带答案题库及答案(最新.docx
文档评论(0)