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

最新推荐文章于 2024-12-02 13:52:40 发布

原创

最新推荐文章于 2024-12-02 13:52:40 发布 · 1.5k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #android #移动开发 #鸿蒙 #ArkTS #ArkUI

前言

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('点我增加').w