一、界面渲染

1.1、条件渲染

  在ArkTS中 我们要根据某个状态来控制元素或者组件的显示隐藏 可以采用条件渲染

• if/else（创建销毁元素）
• 元素高宽-透明度-位置控制 （属性控制）
• visibility属性控制

1.1.1、使用if/else

@State showImg:boolean = false
if(this.showImg) { // 创建销毁元素
  Image('/assets/test.jpeg')
    .width(150)
    .height(150)
} // 不用写else

1.1.2、元素高宽-透明度-位置控制

.width(this.showImg?100:0)   不占位
.height(this.showImg?100:0)  不占位
.opacity(this.showImg?1:0)  占位
.scale({x:this.showImg?1:0,y:this.showImg?1:0 })  占位

1.1.3、visibility属性控制

.visibility(this.showImg?Visibility.Visible:Visibility.Hidden)   占位

visibility的Hidden会占位，元素隐藏，None隐藏且不占位

案例-实现加载数据的loading效果

@Component
struct customLoading {
  @State count:number = 0
  aboutToAppear() {
    setInterval(() => {
      if (this.count === 100) {
        this.count = 0
      }
      this.count++;
    },10
    )
  }
  build() {
    Progress({
      value:this.count,
      total:100,
      type:ProgressType.ScaleRing
    })
      .style({
        strokeWidth:6,
        scaleCount:20
      })
      .color('#000')
  }
}

1.2、循环渲染

  循环渲染使用 ForEach方法来进行，ForEach 接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用。

ForEach(
  // 数据源
  arr: Array,
  // 组件生成函数
  itemGenerator: (item: Array, index?: number) => void,
  // 键值生成函数
  keyGenerator?: (item: Array, index?: number): string => string
)