鸿蒙开发04界面渲染

前言

在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句。

一、条件渲染

1.1 if/else

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

if (this.isShow){
  Image($r('app.media.foreground')).width(100)
}else{
  Image($r('app.media.startIcon')).width(100)
}

1.2 属性控制

可以使用三元表达式进行属性控制，比如元素高度、透明度、位置。

Image($r('app.media.startIcon')).width(this.isShow ? 100 : 0)

1.3 可见性

使用visibility属性进行元素的可见性控制。

Image($r('app.media.startIcon')).visibility(this.isShow? Visibility.Visible : Visibility.None)

二、循环渲染

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

List() {
  ForEach(this.list, (item: GoodItem) => {
    ListItem() {
      Row({ space: 10 }) {
        Image(item.goods_img)
          .borderRadius(8)
          .width(120)
          .height(200)
        Column() {
          Text(item.goods_name)
            .fontWeight(FontWeight.Bold)
          Text("￥" + item.goods_price)
            .fontColor(Color.Red)
            .fontWeight(FontWeight.Bold)
        }
        .padding({
          top: 5,
          bottom: 5
        })
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.SpaceBetween)
        .height(200)
        .layoutWeight(1)
      }

    }.width('100%').padding(5)
  })
}

三、滚动渲染

当和页面做滚动交互时，主要分为下拉刷新和上拉加载。

3.1 下拉刷新

当页面下拉时，应该刷新页面数据。

Refresh({
  refreshing: $$this.refreshing,
  builder: this.refreshContent
}){
  List(){
    ForEach(this.list, (item:number)=>{
      ListItem(){
        Row(){
          Text(item.toString())
        }.width('100%').padding(20)
        .border({
          width: {
            bottom: 1
          },
          color: Color.Gray
        })
      }
    })
  }
}.onRefreshing(()=>{
  setTimeout(()=>{
    this.list = Array(20).fill(Date.now())
    this.refreshing = false
  }, 1000)
})

Refresh组件：refreshing属性是指正在刷新状态的双向绑定，builder属性是指下拉刷新的显示页面组件（需要@Builder修饰符），onRefreshing是开始刷新事件函数。
builder代码如下：

@Builder
refreshContent(){
  Text('正在加载中...')
    .width('100%')
    .textAlign(TextAlign.Center)
    .backgroundColor(Color.Pink)
}

3.2 上拉加载

当页面在底部并上拉时，页面应该请求新数据并加载到页面中。

Refresh({
  refreshing: $$this.refreshing,
  builder: this.refreshContent
}){
  List(){
    ForEach(this.list, (item:number)=>{
      ListItem(){
        Row(){
          Text(item.toString())
        }.width('100%').padding(20)
        .border({
          width: {
            bottom: 1
          },
          color: Color.Gray
        })
      }
    })
  }
  .onScrollStart(()=>{
    // promptAction.showToast({message: '开始滚动'})
    this.isEnd = false
  })
  .onScrollStop(()=>{
    if (this.isEnd) {
      setTimeout(()=>{
        this.list.push(...Array(10).fill(Date.now()))
        promptAction.showToast({message: '已经添加10条数据'})
        this.scroller.scrollEdge(Edge.Bottom)
      }, 100)
    }
  })
  .onReachEnd(()=>{
    this.isEnd = true
  })
}.onRefreshing(()=>{
  setTimeout(()=>{
    this.list = Array(20).fill(Date.now())
    this.refreshing = false
  }, 1000)
})

上拉加载的时机：页面到底部，并且还在上拉刷新。就会加载数据到页面，并且页面定位到新加载数据处。
List组件：onScrollStart开始滚动事件函数，onScrollStop停止滚动事件函数，onReachEnd到达底部事件函数。