HarmonyOS应用开发-ArkTS语言的渲染控制if/else、Foreach_arkts v-if

作者：不正经 | 2024-06-06 18:14:41

踩

arkts v-if

前言

arkts 的渲染控制有 if/else 条件渲染、foreach 循环渲染、lazyforeach 数据懒加载,和其他的语言差不多我们也来玩玩看

渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句以及针对大数据量场景的数据懒加载语句

条件渲染

支持if、else和else if语句。
if、else if后跟随的条件语句可以使用状态变量。

很好理解吧哈哈哈,他的作用远不于此

允许在容器组件内使用，通过条件渲染语句构建不同的子组件。

上面我们就是在容器里面使用,接下来构建不同的子组件玩玩,如果条件为 false 则相当于 vue 里面的的 v-if 表示删除元素

条件渲染语句在涉及到组件的父子关系时是“透明”的，当父组件和子组件之间存在一个或多个if语句时，必须遵守父组件关于子组件使用的规则。
每个分支内部的构建函数必须遵循构建函数的规则，并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。
某些容器组件限制子组件的类型或数量，将条件渲染语句用于这些组件内时，这些限制将同样应用于条件渲染语句内创建的组件。例如，Grid容器组件的子组件仅支持GridItem组件，在Grid内使用条件渲染语句时，条件渲染语句内仅允许使用GridItem组件。


@Entry
@Component
struct ViewA {
    @State count: number = 0;
 
    build() {
        Row() {
            Column() {
                Text(`count=${this.count}`)
 
                Divider().height(20)
 
                // 如果是正数则显示文字
                if (this.count > 0) {
                    Text(`计数为正`).fontSize(30)
                    .fontColor(Color.Green)
 
                    son1()
 
                } else {
                    son2()
                }
 
                Button('点我增加').width(120)
                .onClick(() => {
                    this.count++;
                })
 
                Button('点我递减').width(120)
                .onClick(() => {
                    this.count--;
                })
            }.width("100%")
        }.height("100%").width("100%")
    }
}
 
 
@Component
struct son1 {
    build() {
        Row() {
            Text("儿子1").fontSize(30)
        }
    }
}
 
 
@Component
struct son2 {
    build() {
        Row() {
            Text("儿子2").fontSize(30)
        }
    }
}

在初始渲染时，if语句会执行构建函数，并将生成的子组件添加到其父组件中。

也就这些东西和其他语言没啥区别我就不多说了

循环渲染

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件

参数用法

参数名	参数类型	必填	参数描述
arr	Array	是	数据源，为Array类型的数组。说明：- 可以设置为空数组，此时不会创建子组件。- 可以设置返回值为数组类型的函数，例如arr.slice(1, 3)，但设置的函数不应改变包括数组本身在内的任何状态变量，例如不应使用Array.splice(),Array.sort()或Array.reverse()这些会改变原数组的函数。
itemGenerator	(item: any, index?: number) => void	是	组件生成函数。- 为数组中的每个元素创建对应的组件。- item参数：arr数组中的数据项。- index参数（可选）：arr数组中的数据项索引。说明：- 组件的类型必须是ForEach的父容器所允许的。例如，ListItem组件要求ForEach的父容器组件必须为List组件。
keyGenerator	(item: any, index?: number) => string	否	键值生成函数。- 为数据源arr的每个数组项生成唯一且持久的键值。函数返回值为开发者自定义的键值生成规则。- item参数：arr数组中的数据项。- index参数（可选）：arr数组中的数据项索引。说明：- 如果函数缺省，框架默认的键值生成函数为(item: T, index: number) => { return index + '__' + JSON.stringify(item); }- 键值生成函数不应改变任何组件状态。

使用


@Entry
@Component
struct foreachStudy {
    @State simpleList: Array<string> = ['one', 'two', 'three'];
 
    log (item):string {
        console.log("item", item)
        return item
 
    }
 
    build() {
        Row() {
            Column() {
                ForEach(this.simpleList, (item: string) => {
                    Text(this.log(item)).fontSize(30)
                }, (item: string) => item)
            }
            .width('100%')
            .height('100%')
        }
        .height('100%')
        .backgroundColor(0xF1F3F5)
    }
}

在入口内定义一个自定义方法,里面打印一下日志并且返回传递进来的参数给到调用者,然后循环输出文本组件,很简单.

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，

内容包含了：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料