HarmonyOs渲染控制以及一个简单的todolist

一、if/else条件渲染

if/else语句使用规则：

• 支持if、else和else if语句。
• if、else if后跟随的条件语句可以使用状态变量。
• 允许在容器组件内使用，通过条件渲染语句构建不同的子组件。
• 当if、else if后跟随的状态判断中使用的状态变量值变化时，条件渲染语句会进行更新。
• 条件可以包括Typescript表达式。

if ( 条件表达式 ) {
组件内容1
} else {
组件内容2
}

新建ets文件：

@Entry
@Component
struct If_else {
  // @State message: string = 'Hello World'
  @State isStudy:boolean = true

  build() {
    Row() {
      Column() {
       Button('点击')
         .onClick(()=>{
           this.isStudy = !this.isStudy
         })
        if(this.isStudy) {
        // 图片引用路径为entry\src\main\resources\base\media
        // isStudy为true
          branch({content:'before',src:$r("app.media.before")})
        } else {
        // isStudy为false
          branch({content:'after',src:$r("app.media.after")})
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 自定义组件
@Component
struct branch {
  content:string
  src:Resource

  build() {
    Column() {
      Text(this.content)
      Image(this.src)
        .width(300)
        .height(300)
    }
  }
}

预览器效果：

点击按钮之后，isStudy变为fasle，content内容发生改变：

二、ForEach循环渲染

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

接口描述：

ForEach(
  arr: Array,
  itemGenerator: (item: any, index: number) => void,
  keyGenerator?: (item: any, index: number) => string
)

新建ets文件：

@Entry
@Component
struct Foreach {
  @State message: string = 'foreach循环渲染'
  @State product: string[] = ['你','我','他']
  // 对象数组
  @State harmony : Object[] = [
    {
      id : 1,
      title: '你们'
    },
    {
      id : 2,
      title: '我们'
    },
    {
      id : 3,
      title: '他们'
    }
  ]

  build() {
    Row() {
      Column() {
      Text(this.message)
        .fontSize(30)
        // this.product表示数组,item表示每个值,index表示0，1，2，3的索引值
        // 没有用到index值时，箭头函数中可不写index
        ForEach(this.product, (item,index) => {
          Text(item + index).fontSize(15)
        },(item)=>{
          return item
        })
        ForEach(this.harmony,(item)=>{
          // 字符串拼接
          // Text(item.id +' - '+ item.title).fontSize(20)
          Text(`${item.id}-${item.title}`).fontSize(25)
        },(item)=>{
          // 此时item是对象，返回的是唯一的数据，各个对象里的数据，title可能相同，id是唯一的
          return item.id
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

预览器效果：

可成功打印出数组里的内容

三、使用if/else和forEach的一个简单的todolist

TodoList主页面：
TodoList.ets在entry\src\main\ets\pages目录下：

import TodoItem from '../view/TodoItem'
@Entry
@Component
struct TodoList {
  @State message: string = '待办'
  // 数组容器
  private TotalTask : string[] = [
    '第一项待办',
    '第二项待办',
    '第三项待办',
    '第四项待办',
    '第五项待办',
    '第六项待办'
  ]

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()
        // TodoItem({content:'web'})
        ForEach(this.TotalTask,(item,index)=>{
          TodoItem({ content: item })
        },(item)=>{
          // 返回的数据是字符串类型的
          // 如果是其他类型的,可以用JSON.stringfy(xxx)转化为字符串类型
          return item
        })
      }
      // .width('100%')
      Row() {
        Image($r('app.media.success'))
          .width(100)
          .height(100)
      }

    }

    // .height('100%')
    .backgroundColor('#eee')

  }

}

封装外部子组件：
TodoItem.ets文件在\entry\src\main\ets\view目录下

@Component
// export default可以导出TodoItem，一定要加
export default struct TodoItem {
  // 待办事项未完成与已完成状态的切换
  @State isDone : boolean = false
  // 加上？代表可以传参数也可以不传参数
  content ? : string
  build() {
    Row({space:20}) {
      if (this.isDone) {
        Image($r('app.media.success')).TodoItem_img()
      } else {
        Image($r('app.media.fail')).TodoItem_img()
      }
      // 超过三个属性可以进行@Extend封装
      // Image($r('app.media.fail')).TodoItem_img()
      Text(this.content)
        .margin({
          left:-10
        })
        .decoration({type : this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None})
    }
    .TodoItem_row()
    .onClick(()=>{
      this.isDone =! this.isDone
    })
  }
}

// 图片样式函数
@Extend(Image) function TodoItem_img() {
  .width(30)
  .height(30)
  .objectFit(ImageFit.Contain)
  .margin({
    left:10
  })
}

//扩展row样式函数
@Extend(Row) function TodoItem_row() {
  .width('90%')
  .height(50)
  .backgroundColor(Color.White)
  .borderRadius(10)
  .shadow({ radius: 10, color: Color.Gray })
  .margin({
    bottom:10
  })
}

预览器效果：

点击待办事项后，表示该待办已完成。如图所示：