Openharmony开发与入门----界面渲染 原创

·循环渲染（Foreach渲染）

①接口描述：

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

②实例展示

代码：
@Entry
@Component
struct MyComponent {
@State arr: number[] = [10, 20, 30];

build() {
Column({ space: 5 }) {
ForEach(this.arr, (item: number) => {
Text(item value: ${item}).fontSize(18)
Divider().strokeWidth(2)
}, (item: number) => item.toString())
}
}
}
运行结果：

③水果排行榜代码优化：

@Entry
@Component
struct Index {
//类结构体
fruitsData:Array<Object>=[
{
‘id’:‘1’,
‘name’:‘苹果’,
‘vote’:‘12080’
},
{
‘id’:‘2’,
‘name’:‘葡萄’,
‘vote’:‘11090’
},
{
‘id’:‘3’,
‘name’:‘西瓜’,
‘vote’:‘9801’
}
]

build() {
Column(){
//标题栏
Row(){
//左侧布局
Row(){
Image($r(‘app.media.1’))
.width(22)
.height(22)
//给图片和文字设定外边距
.margin({right:18})
Text(‘排行榜’)
.fontSize(20)
}
.width(‘50%’)
.height(‘100%’)
.justifyContent(FlexAlign.Start)
//右侧布局
Row(){
Image($r(‘app.media.2’))
.width(22)
.height(22)
}
.width(‘50%’)
.height(‘100%’)
.justifyContent(FlexAlign.End)
}
.width(‘100%’)
.height(47)

  //排行榜表头
  Row(){
    Row(){
      Text('排名')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('30%')
    Row(){
      Text('种类')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('50%')
    Row(){
      Text('得票数')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('20%')

  }
  .width('90%')
  .padding(15)
  //排行榜列表项
  Column(){
     List(){
    //   //苹果,ListItem用来描述每一行
    //   ListItem(){
    //     Row(){
    //       Text('1').fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Bold).width('30%')
    //         .backgroundColor(Color.Blue)
    //         .borderRadius(15).width(30).height(30)
    //         .textAlign(TextAlign.Center).margin({right:55})
    //       Text('苹果').fontSize(16).fontWeight(FontWeight.Bold).width('40%')
    //       Text('12080').fontSize(16).fontWeight(FontWeight.Bold).width('30%')
    //     }
    //   }.width('100%').height(47)
    //   //葡萄
    //   ListItem(){
    //     Row(){
    //       Text('2').fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Bold).width('30%')
    //         .backgroundColor(Color.Blue)
    //         .borderRadius(15).width(30).height(30)
    //         .textAlign(TextAlign.Center).margin({right:55})
    //       Text('葡萄').fontSize(16).fontWeight(FontWeight.Bold).width('40%')
    //       Text('10320').fontSize(16).fontWeight(FontWeight.Bold).width('30%')
    //     }
    //   }.width('100%').height(47)
    //   //西瓜
    //   ListItem(){
    //     Row(){
    //       Text('3').fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Bold).width('10%')
    //         .backgroundColor(Color.Blue)
    //         .borderRadius(15).width(30).height(30)
    //         .textAlign(TextAlign.Center).margin({right:55})
    //       Text('西瓜').fontSize(16).fontWeight(FontWeight.Bold).width('40%')
    //       Text('9801').fontSize(16).fontWeight(FontWeight.Bold).width('30%')
    //     }
    //   }.width('100%').height(47)
       ForEach(this.fruitsData,(item)=>{
           ListItem(){
             Row(){
               Text(item.id).fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Bold).width('30%')
                 .backgroundColor(Color.Blue)
                 .borderRadius(15).width(30).height(30)
                 .textAlign(TextAlign.Center).margin({right:55})
               Text(item.name).fontSize(16).fontWeight(FontWeight.Bold).width('40%')
               Text(item.vote).fontSize(16).fontWeight(FontWeight.Bold).width('30%')
             }
           }.width('100%').height(47)
       })
     }
  }.width('90%')
  .padding(15)
  .backgroundColor(Color.White)
  .borderRadius(18)
}
.height('100%')
.width('100%')
//设置内边距
.padding({right:26,left:26})
//设置外边距
.margin({top:10})
.backgroundColor('#f1f3f5')
}

}

·条件渲染

①使用规则：

支持if、else和else if语句。
if、else if后跟随的条件语句可以使用状态变量。
允许在容器组件内使用，通过条件渲染语句构建不同的子组件。

②实例展示（水果排行榜的循环渲染+条件渲染）

代码：
@Entry
@Component
struct Index {
//类结构体
fruitsData:Array<Object>=[
{
‘id’:‘1’,
‘name’:‘苹果’,
‘vote’:‘12080’
},
{
‘id’:‘2’,
‘name’:‘葡萄’,
‘vote’:‘11090’
},
{
‘id’:‘3’,
‘name’:‘西瓜’,
‘vote’:‘9801’
},
{
‘id’:‘4’,
‘name’:‘柠檬’,
‘vote’:‘7277’
},
]

build() {
Column(){
//标题栏
Row(){
//左侧布局
Row(){
Image($r(‘app.media.1’))
.width(22)
.height(22)
//给图片和文字设定外边距
.margin({right:18})
Text(‘排行榜’)
.fontSize(20)
}
.width(‘50%’)
.height(‘100%’)
.justifyContent(FlexAlign.Start)
//右侧布局
Row(){
Image($r(‘app.media.2’))
.width(22)
.height(22)
}
.width(‘50%’)
.height(‘100%’)
.justifyContent(FlexAlign.End)
}
.width(‘100%’)
.height(47)

  //排行榜表头
  Row(){
    Row(){
      Text('排名')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('30%')
    Row(){
      Text('种类')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('50%')
    Row(){
      Text('得票数')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('20%')

  }
  .width('90%')
  .padding(15)
  //排行榜列表项
  Column(){
     List(){
       ForEach(this.fruitsData,(item)=>{
           ListItem(){
             Row() {
               if (item.id <= 3) {
                 Column() {
                   Row() {
                     Text(item.id)
                       .fontSize(14)
                       .fontColor(Color.White)
                   }
                   .backgroundColor(Color.Blue)
                   .width(24)
                   .height(24)
                   .borderRadius(24)
                   .justifyContent(FlexAlign.Center)
                 }
                 .width('30%')
                 .alignItems(HorizontalAlign.Start)

               }
               else {
                 Column() {
                   Text(item.id)
                     .fontSize(16)
                     .fontWeight(FontWeight.Bold)                       .width(24)
                     .height(24)
                     .width(24)
                     .textAlign(TextAlign.Center)
                 }
                 .width('30%')
                 .alignItems(HorizontalAlign.Start)
               }
               Text(item.name).fontSize(16).fontWeight(FontWeight.Bold).width('40%')
               Text(item.vote).fontSize(16).fontWeight(FontWeight.Bold).width('30%')
             }
           }.width('100%').height(47)
       })
     }
  }.width('90%')
  .padding(15)
  .backgroundColor(Color.White)
  .borderRadius(18)
}
.height('100%')
.width('100%')
//设置内边距
.padding({right:26,left:26})
//设置外边距
.margin({top:10})
.backgroundColor('#f1f3f5')
}

}
运行结果：