学习鸿蒙的第三课(组件的封装)

1.自定义组件抽离 @commpont

/**
 * 组件外部引入
 */
@Component
export struct NavigationBar {
  private title: ResourceStr
  build() {
    Row() {
      Image($r('app.media.returns'))
        .width(30)
        .height(30)
        .margin({ right: 10 })

      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      // Black组件可以暂满剩余的盒子的宽度
      Blank()
      Image($r('app.media.Refreshs'))
        .width(30)
        .height(30)
    }
    .height(30)
    .justifyContent(FlexAlign.Start)
    // .backgroundColor('#f7f7')
    .width('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.自定义全局构建函数 @Builder

将列表中的每一项抽离成一个方法

@Builder function itemGrilCard(iterm: iterm){
  Row(){
    Image(iterm.image)
      .width(120)
      .height(120)
        // 消除锯齿效果
      .interpolation(ImageInterpolation.High)
    Column({space:4}){
      if(iterm.changeGril){
        Text(iterm.name)
          .TextIStyle()
      }else{
        Text(iterm.name)
          .TextIStyle()
        Text(iterm.price)
          .TextIStyle()
      }

    }
    .height(100)
    .margin(10)
    .alignItems(HorizontalAlign.Start)
  }
  .fillScreen()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3.自定义style全局构建函数@style

@Styles function fillScreen(){
  .width('100%')
  .backgroundColor('#f6f6f6')
  .padding(10)
  .borderRadius(10)
}
1
2
3
4
5
6

4.组件特有全局构建函数@Extend(Text)

@Extend(Text) function  TextIStyle(){
  .fontWeight(FontWeight.Bold)
  .fontSize(20)
}
1
2
3
4