手把手教你实用的鸿蒙小技巧 原创

build() {
  Column() {
        Text('HarmonyOS开发初体验')
        .width('100%')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        Text('一套代码工程，一次开发上架，多端按需部署，' +
        '支撑开发者快速高效的开发支持多种终端设备形态的应用，' +
        '实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。')
        .lineHeight(24)
        .textOverflow({
        overflow:TextOverflow.Ellipsis
        })
        //必须配合maxlines
          .maxLines(3)
            }
        }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

Text(){
  ImageSpan($r('app.media.文件名'))
    .width(16)
    .margin({right:3})
  Span('HarmonyOS')
    .fontSize(12)
    .fontColor('#7e7e7e')
}
1.
2.
3.
4.
5.
6.
7.
8.

@Entry
@Component
struct Index {
  @State count: number =1
  @State oldPrice:number=40.4
  @State newPrice:number=20.2
//状态变量:需要装饰器装饰，改变会引起UI的渲染刷新（必须设置类型和初始值）
//定义在组件内的普通变量或者状态变量，都需要通过this访问 
  build() {
    Column(){
      Stack({ alignContent:Alignment.Bottom }){
        Stack({alignContent:Alignment.Top}){
          Scroll(){
            Row(){
              Image($r('app.media.startIcon'))
                .width(100)
                .height(80)
                .padding({right:10})
              Column({space:15}){
                Text('冲销量1000ml缤纷八果水果捞')
                  .fontWeight(700)
                  .fontSize(14)
                Text(`含${this.count}份折扣商品`)
                  .fontSize(12)
                  .fontColor('#9b9b9b')
                Row(){
                  Text() {
                    Span('￥')
                      .fontColor('#ff0000')
                    Span(this.newPrice.toFixed(2))
                      .fontColor('#ff0000')
                  }
                  .padding({right:5})
                  Text(){
                    Span('￥')
                    Span(this.oldPrice.toFixed(2))
                  }.fontColor('#a4a4a4')
                  .fontSize(12)
                  .decoration({
                    type: TextDecorationType.LineThrough,
                    color: '#a4a4a4'
                  })
                  .padding({right:30})
                  Text('-')
                    .width(22)
                    .height(22)
                    .border({width:1,color:'#e1e1e1',radius:5})
                    .textAlign(TextAlign.Center)
                    .fontWeight(700)
                    .onClick(()=>{
                      if(this.count!=0){
                        this.count--;
                      }
                    })
                  Text(this.count.toString())
                    .height(22)
                    .border({width:{top:1,bottom:1},color:'#e1e1e1'})
                    .padding({left:10,right:10})
                    .fontSize(14)
                  Text('+')
                    .width(22)
                    .height(22)
                    .border({width:1,color:'#e1e1e1',radius:5})
                    .textAlign(TextAlign.Center)
                    .fontWeight(700)
                    .onClick(()=>{
                      this.count++;
                    })
                }
              }.alignItems(HorizontalAlign.Start)
            }.alignItems(VerticalAlign.Top)
          }
        }
        .padding({top:20})
        .width('100%')
        .height('100%')

        Column(){
          //底部
          Row({space :15}){
            Column(){
              Text()
              {
                Span(`已选${this.count}件,`)
                  .fontColor('#9c9c9c')
                  .fontSize(12)
                Span('合计:')
                  .fontSize(14)
                Span('￥')
                Span((this.count*this.newPrice).toFixed(2))
                  .fontColor('#ff0000')
                  .fontSize(14)
              }
              Text(`共减￥`+(this.count*(this.oldPrice-this.newPrice)).toFixed(2))
                .fontColor('#ff0000')
                .fontSize(11)
            }
            .alignItems( HorizontalAlign.End)
            Button('结算外卖')
              .backgroundColor('#fed340')
              .fontColor('#482d01')
          }
          .alignItems(VerticalAlign.Top)
          .padding({top:20,left:70})
        }
        .width('100%')
        .backgroundColor('#ffffff')
        .height(80)
      }
      .backgroundColor('#f3f3f3')
      .height('100%')
      .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.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.