鸿蒙开发04界面渲染

文章目录


前言

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


一、条件渲染

1.1 if/else

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

typescript 复制代码
if (this.isShow){
  Image($r('app.media.foreground')).width(100)
}else{
  Image($r('app.media.startIcon')).width(100)
}

1.2 属性控制

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

typescript 复制代码
Image($r('app.media.startIcon')).width(this.isShow ? 100 : 0)

1.3 可见性

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

typescript 复制代码
Image($r('app.media.startIcon')).visibility(this.isShow? Visibility.Visible : Visibility.None)

二、循环渲染

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

typescript 复制代码
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 下拉刷新

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

typescript 复制代码
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代码如下:

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

3.2 上拉加载

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

typescript 复制代码
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到达底部事件函数。

相关推荐
zhanshuo10 小时前
让鸿蒙应用丝滑如飞:绘图性能优化全攻略(附代码实战)
harmonyos
zhanshuo10 小时前
适配鸿蒙低性能设备的终极优化方案:从启动到渲染全链路实战
harmonyos
Georgewu11 小时前
【HarmonyOS】鸿蒙ArkWeb加载优化方案详解
harmonyos
Georgewu11 小时前
【HarmonyOS】鸿蒙应用HTTPDNS 服务集成详解
harmonyos
simple_lau14 小时前
鸿蒙 3D 开发实战:从模型加载到动画管理的完整实现
harmonyos·arkts·arkui
litongde15 小时前
React Native 编程
react native·harmonyos
程序员老刘17 小时前
“工信部要求9月30日前APP必须100%适配鸿蒙“ 是真的吗?
flutter·harmonyos
袁震17 小时前
鸿蒙Harmony-自定义List组件,解决List组件手势滑动点击卡住问题
鸿蒙·list组件·鸿蒙自定义组件封装·鸿蒙滑动卡顿卡住
默言_sun17 小时前
方舟web使用及数据双向通信
harmonyos
万少1 天前
AI编程神器!Trae+Claude4.0 简单配置 让HarmonyOS开发效率飙升 - 坚果派
前端·aigc·harmonyos