做自己的网站需要什么,怎么建网站教程视频app,安徽建设官网,中国前十大投资公司【HarmonyOS】HarmonyOS NEXT学习日记#xff1a;六、渲染控制、样式结构重用
渲染控制包含了条件渲染和循环渲染#xff0c;所谓条件渲染#xff0c;即更具状态不同#xff0c;选择性的渲染不同的组件。 而循环渲染则是用于列表之内的、多个重复元素组成的结构中。 …【HarmonyOS】HarmonyOS NEXT学习日记六、渲染控制、样式结构重用
渲染控制包含了条件渲染和循环渲染所谓条件渲染即更具状态不同选择性的渲染不同的组件。 而循环渲染则是用于列表之内的、多个重复元素组成的结构中。
在声明式描述语句中开发者除了使用系统组件外还可以使用渲染控制语句来辅助UI的构建这些渲染控制语句包括控制组件是否显示的条件渲染语句基于数组数据快速生成组件的循环渲染语句针对大数据量场景的数据懒加载语句针对混合模式开发的组件渲染语句。
渲染控制
条件渲染if/else
ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态使用if、else和else if渲染对应状态下的UI内容。
Entry
Component
struct Index {State counter: number 0;build() {Column({space: 10}){Text(counter${this.counter})Row(){if(this.counter0){Text(counter0,不展示归零按钮);}else{Button(归零).onClick((){this.counter0})}}Row(){Button(counter).onClick((){this.counter})}}}
}上文我们实现了一个例子、初始化counter为0提供一个counter的按钮点击时counter1。 当counter0时显示文字counter0,不展示归零按钮 否则展示一个归零按钮 点击归零按钮后counter赋值0页面回归初始状态 通过这个例子就简单掌握了条件渲染的用法。
循环渲染
ForEach接口基于数组类型数据来进行循环渲染需要与容器组件配合使用且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如ListItem组件要求ForEach的父容器组件必须为List组件。
用法
// Index.ets
import text from ohos.graphics.text;interface newItem{title: string,subTitle: string,time: string
}Entry
Component
struct Index {State news: newItem[] [{title: 新闻标题1,subTitle: 这是一个副标题1,time: 2024/7/22},{title: 新闻标题2,subTitle: 这是一个副标题2,time: 2024/7/22},{title: 新闻标题3,subTitle: 这是一个副标题3,time: 2024/7/22}];build() {Scroll(){Column({space:1}){ForEach(this.news,(item:newItem){Column(){Row(){Text(item.title).fontSize(22)}.width(100%)Row(){Text(item.subTitle).fontColor(#aaa)}.width(100%)Row(){Text(item.time).fontColor(#aaa)}.width(100%).justifyContent(FlexAlign.End)}.padding(10).border({width: {bottom: 1},color: #ccc,style: BorderStyle.Dashed,}).backgroundColor(rgba(25, 159, 126, 0.1))},(item:newItem,index:number)index)}.width(100%).backgroundColor(#eee)}}
}样式结构重用
Extend扩展组件样式、事件
继承一个组件并且为其添加扩展方法通过自定义扩展方法就可以添加可复用的样式和事件。
// Index.ets
import text from ohos.graphics.text;
Extend(Text)
function textExtend(backgroundColor: ResourceColor,text: string){.textAlign(TextAlign.Center).backgroundColor(backgroundColor).fontColor(Color.Red).fontSize(22).width(100%).onClick(() {AlertDialog.show({message: text})})
}
Entry
Component
struct Index {build() {Column(){Text(1111).textExtend(Color.Blue,1111)Text(2222).textExtend(Color.Green,2222)}}
}可以看到我们布局时的代码简练了很多  {.backgroundColor(#eee).width(100%).onClick(() {AlertDialog.show({message: 点击触发})})
}
Entry
Component
struct Index {build() {Column(){Text(1111).textStyle().textAlign(TextAlign.Center)Text(2222).textStyle().textAlign(TextAlign.Center)}}
}特点
只能设置CommonAttribute类型的属性也就是通用属性 像是TextFont这种只能给Text组件设置的属性无法通过这种方式提取。无法接收参数有组件作用域和全局作用域
Builder自定义构建函数结构、样式、事件
通过Builder我们可以自定义构建函数将需要复用的结构、样式、事件通通封装起来。
// Index.ets
import text from ohos.graphics.textBuilder function TextItem(text: string){Text(text).fontSize(18).fontColor(Color.Red).backgroundColor(#ccc).lineHeight(30).width(100%).textAlign(TextAlign.Center).onClick((){AlertDialog.show({message: text})})
}
Entry
Component
struct Index {build() {Column(){TextItem(111)TextItem(222)TextItem(333)}}
}点击后可以触发事件
