样式 - 比特日记

样式

@Style


1
2
3
1抽取页面中重复样式代码，只能提取布局样式，不支持字体或文本样式
2可以写在struct组件内、组件外（function），仅在同一个文件生效
3不支持传参


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 1@Entry
 2@Component
 3struct Page02_TaskList {
 4  // 组件内部提取公共样式
 5  @Styles
 6  titleText() {
 7    .width(100)
 8    .height(100)
 9    .backgroundColor(Color.Brown)
10    .borderRadius(10)
11  }
12
13  build() {
14    Column() {
15      // 主体内容
16      Column()
17        .titleText()
18    }
19    .height('100%')
20    .width('100%')
21    .padding(10)
22    .backgroundColor('#f1f3f5')
23  }
24}

组件外

增加function关键字


 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
29
30
31
32
33
34
35
 1@Styles
 2function titleText2() {
 3  .width(100)
 4  .height(100)
 5  .backgroundColor(Color.Orange)
 6  .borderRadius(10)
 7}
 8
 9@Entry
10@Component
11struct Page02_TaskList {
12  // 组件内部提取公共样式
13  @Styles
14  titleText() {
15    .width(100)
16    .height(100)
17    .backgroundColor(Color.Brown)
18    .borderRadius(10)
19  }
20
21  build() {
22    Column() {
23      // 主体内容
24      Column()
25        .titleText()
26
27      Column()
28        .titleText2()
29    }
30    .height('100%')
31    .width('100%')
32    .padding(10)
33    .backgroundColor('#f1f3f5')
34  }
35}

@Extend


1
2
3
1扩展鸿蒙原生组件样式或事件，重定义原生组件样式，类似@Styles
2必须指定组件
3支持传参


 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
29
30
31
32
 1@Extend(Text)
 2function textStyle() {
 3  .fontSize(16)
 4  .fontColor($r('app.color.add_title_color'))
 5}
 6
 7@Entry
 8@Component
 9struct Page02_TaskList {
10  // 组件内部提取公共样式
11  @Styles
12  titleText() {
13    .width(100)
14    .height(100)
15    .backgroundColor(Color.Brown)
16    .borderRadius(10)
17  }
18
19  build() {
20    Column() {
21      // 主体内容
22      Column() {
23        Text('内容')
24          .textStyle()
25      }
26    }
27    .height('100%')
28    .width('100%')
29    .padding(10)
30    .backgroundColor('#f1f3f5')
31  }
32}