HarmonyOS-if-else-条件渲染

这篇具有很好参考价值的文章主要介绍了HarmonyOS-if-else-条件渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

if/else:条件渲染

ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用if、else和else if渲染对应状态下的UI内容。

说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

使用规则

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

更新机制

当if、else if后跟随的状态判断中使用的状态变量值变化时,条件渲染语句会进行更新,更新步骤如下:

  1. 评估if和else if的状态判断条件,如果分支没有变化,无需执行以下步骤。如果分支有变化,则执行2、3步骤:
  2. 删除此前构建的所有子组件。
  3. 执行新分支的构造函数,将获取到的组件添加到if父容器中。如果缺少适用的else分支,则不构建任何内容。

条件可以包括Typescript表达式。对于构造函数中的表达式,此类表达式不得更改应用程序状态。

使用场景

使用if进行条件渲染

@Entry
@Component
struct ViewA {
  @State count: number = 0;

  build() {
    Column() {
      Text(`count=${this.count}`)

      if (this.count > 0) {
        Text(`count is positive`)
          .fontColor(Color.Green)
      }

      Button('increase count')
        .onClick(() => {
          this.count++;
        })

      Button('decrease count')
        .onClick(() => {
          this.count--;
        })
    }
  }
}

if语句的每个分支都包含一个构建函数。此类构建函数必须创建一个或多个子组件。在初始渲染时,if语句会执行构建函数,并将生成的子组件添加到其父组件中。

每当if或else if条件语句中使用的状态变量发生变化时,条件语句都会更新并重新评估新的条件值。如果条件值评估发生了变化,这意味着需要构建另一个条件分支。此时ArkUI框架将:

  1. 删除所有以前渲染的(早期分支的)组件。
  2. 执行新分支的构造函数,将生成的子组件添加到其父组件中。

在以上示例中,如果count从0增加到1,那么if语句更新,条件count > 0将重新评估,评估结果将从false更改为true。因此,将执行条件为真分支的构造函数,创建一个Text组件,并将它添加到父组件Column中。如果后续count更改为0,则Text组件将从Column组件中删除。由于没有else分支,因此不会执行新的构造函数。

if … else …语句和子组件状态

以下示例包含if … else …语句与拥有@State装饰变量的子组件。

@Component
struct CounterView {
  @State counter: number = 0;
  label: string = 'unknown';

  build() {
    Row() {
      Text(`${this.label}`)
      Button(`counter ${this.counter} +1`)
        .onClick(() => {
          this.counter += 1;
        })
    }
  }
}

@Entry
@Component
struct MainView {
  @State toggle: boolean = true;

  build() {
    Column() {
      if (this.toggle) {
        CounterView({ label: 'CounterView #positive' })
      } else {
        CounterView({ label: 'CounterView #negative' })
      }
      Button(`toggle ${this.toggle}`)
        .onClick(() => {
          this.toggle = !this.toggle;
        })
    }
  }
}

CounterView(label为 ‘CounterView #positive’)子组件在初次渲染时创建。此子组件携带名为counter的状态变量。当修改CounterView.counter状态变量时,CounterView(label为 ‘CounterView #positive’)子组件重新渲染时并保留状态变量值。当MainView.toggle状态变量的值更改为false时,MainView父组件内的if语句将更新,随后将删除CounterView(label为 ‘CounterView #positive’)子组件。与此同时,将创建新的CounterView(label为 ‘CounterView #negative’)实例。而它自己的counter状态变量设置为初始值0。

说明

CounterView(label为 ‘CounterView #positive’)和CounterView(label为 ‘CounterView #negative’)是同一自定义组件的两个不同实例。if分支的更改,不会更新现有子组件,也不会保留状态。

以下示例展示了条件更改时,若需要保留counter值所做的修改。

@Component
struct CounterView {
  @Link counter: number;
  label: string = 'unknown';

  build() {
    Row() {
      Text(`${this.label}`)
      Button(`counter ${this.counter} +1`)
        .onClick(() => {
          this.counter += 1;
        })
    }
  }
}

@Entry
@Component
struct MainView {
  @State toggle: boolean = true;
  @State counter: number = 0;

  build() {
    Column() {
      if (this.toggle) {
        CounterView({ counter: $counter, label: 'CounterView #positive' })
      } else {
        CounterView({ counter: $counter, label: 'CounterView #negative' })
      }
      Button(`toggle ${this.toggle}`)
        .onClick(() => {
          this.toggle = !this.toggle;
        })
    }
  }
}

此处,@State counter变量归父组件所有。因此,当CounterView组件实例被删除时,该变量不会被销毁。CounterView组件通过@Link装饰器引用状态。状态必须从子级移动到其父级(或父级的父级),以避免在条件内容或重复内容被销毁时丢失状态。

嵌套if语句

条件语句的嵌套对父组件的相关规则没有影响。文章来源地址https://www.toymoban.com/news/detail-819438.html

@Entry
@Component
struct CompA {
  @State toggle: boolean = false;
  @State toggleColor: boolean = false;

  build() {
    Column() {
      Text('Before')
        .fontSize(15)
      if (this.toggle) {
        Text('Top True, positive 1 top')
          .backgroundColor('#aaffaa').fontSize(20)
        // 内部if语句
        if (this.toggleColor) {
          Text('Top True, Nested True, positive COLOR  Nested ')
            .backgroundColor('#00aaaa').fontSize(15)
        } else {
          Text('Top True, Nested False, Negative COLOR  Nested ')
            .backgroundColor('#aaaaff').fontSize(15)
        }
      } else {
        Text('Top false, negative top level').fontSize(20)
          .backgroundColor('#ffaaaa')
        if (this.toggleColor) {
          Text('positive COLOR  Nested ')
            .backgroundColor('#00aaaa').fontSize(15)
        } else {
          Text('Negative COLOR  Nested ')
            .backgroundColor('#aaaaff').fontSize(15)
        }
      }
      Text('After')
        .fontSize(15)
      Button('Toggle Outer')
        .onClick(() => {
          this.toggle = !this.toggle;
        })
      Button('Toggle Inner')
        .onClick(() => {
          this.toggleColor = !this.toggleColor;
        })
    }
  }

到了这里,关于HarmonyOS-if-else-条件渲染的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python条件判断语句(if else)

            python中判断语句的基本结构由if和else组成,当if后面的条件为真时,执行if下面的语句;当if后面的条件为假时,执行else下面的语句。这里条件的真假都是用bool值来作为依据的,我们知道比较运算、成员运算、身份运算返回的结果都是bool值。所以比较运算、成员运算

    2024年02月09日
    浏览(60)
  • C 语言教程:条件和 if...else 语句

    您已经学习过 C 语言支持数学中的常见逻辑条件: 小于: a b 小于或等于: a = b 大于: a b 大于或等于: a = b 等于: a == b 不等于: a != b 您可以使用这些条件来根据不同的决策执行不同的操作。 C 语言具有以下条件语句: 使用 if 来指定要执行的代码块,如果指定的条件为真

    2024年02月04日
    浏览(58)
  • Python- 条件语句if-elif-else

    目录 一、一个简单示例 二、条件测试 1. 检查是否相等 2. 检查是否相等时忽略大小写 3. 检查是否不相等 4. 数值比较 5. 检查多个条件 6. 检查特定值是否包含在列表中 7. 检查特定值是否不包含在列表中 8. 布尔表达式 三、if语句 1. 简单的if语句 2. if-else语句 3. if-elif-else结构 4

    2024年02月06日
    浏览(53)
  • 《人生苦短——我学Python》条件判断->双向选择(if--else)

    今天我们来学习双向选择判断。顾名思义,双向就是两种选择选其一,即 if----else 。如果If的条件不成立,则执行 else 下的语句,否则执行 if 下面的语句。显然,它们是 互斥 的!下面就让我们来详细看看吧! if 后面的语句是当判断 条件成立 时, 需要执行 的操作。 else 后面

    2024年02月10日
    浏览(41)
  • C++中使用 if…else 有条件地执行多条语句

    如果要在满足(或不满足)条件时执行多条语句,需要将它们组合成一个语句块。包含在大括号({})内的多条语句被视为语句块,例如: 这样的语句块也被称为复合语句。 写在花括号{}中的内容组成的语句,就是复合语句。特别的,如果你只写了一个花括号,里面什么内容

    2024年02月10日
    浏览(40)
  • 条件运算符? : 与if-else语句的对比及用法详解

    条件运算符? : :给程序员提供了一种简便的方式进行条件判断和表达式的求值。在C语言中,条件运算符? : 是一个三元运算符,可以根据条件的真假来判断输出结果。本篇文章将详细介绍条件运算符的用法,以及与if-else语句的对比,并结合实例来进一步理解。 条件运算符?

    2024年02月05日
    浏览(52)
  • HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染

    ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用 if、else 和 else if 渲染对应状态下的 UI 内容。 写法和 TS 的一样,简单看一下即可 效果: 另外,@State 定义的变量归父组件所有。因此,当 子组件 实例被删除时,该变量不会被销毁。 子组件 通过 @Link装饰器

    2024年01月16日
    浏览(47)
  • 【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月05日
    浏览(46)
  • 【算法笔记】求1+2+3+...+n,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句(A?B:C)。

    求1+2+3+…+n,要求不能使用乘除法、for、while、if、else、switch、case等及条件判断语句(A?B:C)、位运算、递归、公式、sizeof。 习题链接:题目链接 该题把我们的所有能用的方法都给限制死了,我们只能用一些的特殊的方法来做。不知道大家在思考的过程中考没考虑过

    2024年02月07日
    浏览(63)
  • FE_Vue学习笔记 条件渲染[v-show v-if] & 列表渲染[v-for] 列表过滤 列表排序

    使用template可以使其里面的内容在html的结构中不变。条件渲染: v-if 1)v-if=“表达式” 2)v-else-if=“表达式” 3)v-else {} 适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“打断”。 v-show 写法:

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包