响应式网站设计与实现论文如何建站

---

前言

在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助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到达底部事件函数。