黑马视频HarmonyOS零底子

本文章是根据黑马步伐员鸿蒙 HarmonyOS NEXT星河版零底子入门到实战
00-鸿蒙开辟环境预备_哔哩哔哩_bilibili

https://www.bilibili.com/video/BV14t421W7pA?spm_id_from=333.788.videopod.episodes&vd_source=5d8817075e4d4e6bbfaa6c0251bdca76&p=2记录HarmonyOS的底子。
该视频真的非常得当有点了解前端的小同伴学习，里面有很多最底子的东西。
有前端经验，react经验的小同伴看这个视频就非常的容易明白，直接看以下的条记，认真过一遍就可以了。
以下是我的训练仓库：
HarmonyOS-learn: 对HarmonyOS的底子学习记录 (gitee.com)

https://gitee.com/saro-d/harmonyOS-learn
   后续将连续更新该视频的条记
  ArkTs

1. // 打印
2. console.log('你好，我第一次来','黑马');
4. // 变量
5. let firstDay:string = '他们吵起来了'
6. firstDay = '看视频吵起来的'
8. // 常量
9. const commoy:string ='这是个常量，不可修改'
11. // 数组
12. const names:string[] = ['小红','小明','笑话']
14. // 函数
15. function fn(val:number){
16.   console.log('你好，我是函数', val)
17. }
18. fn(2)
20. // 箭头函数
21. const jianTouFn = (val:string)=>{
22.   console.log('你好，我是箭头函数', val)
23. }
24. jianTouFn('箭头函数1')
26. // 对象
27. interface perObj{
28.   name:string,
29.   age:number,
30.   statue:boolean,
31.   sing:()=>void,
32.   say:(val:string)=>string
33. }
34. const person:perObj = {
35.   name:'大大',
36.   age:18,
37.   statue:false,
38.   sing:() => {
39.     console.log('唱歌了')
40.   },
41.   say:(val:string) => {
42.     return val
43.   }
44. }
46. person.sing()
47. console.log('对象名',person.name)
48. console.log('对象说话',person.say('你好'))
50. // 联合类型
51. let res:string | number |boolean = '优'
52. res = 100
53. res = false
55. let gender:'man'|'woman'|'no' = 'no'  // 值已经被约束
57. // 枚举类型
58. enum ColorEnum{
59.   Red='红色',
60.   Black='黑色'
61. }
63. let sayColor:ColorEnum=ColorEnum.Red
64. console.log('颜色',sayColor)

复制代码

ArkUI

组件：容器组件，底子组件

 根组件只有一个，以是最外层需要用Column容器组件包裹

1. struct Index {
3.   build() {
5.     Column(){
6.       Text('小说简介')
8.       Row(){
9.         Text('都市')
10.         Text('言情')
11.         Text('生活')
12.         Text('男频')
13.       }
15.     }
16.   }
17. }

复制代码

组件字体属性方法

字体颜色

1. struct Index {
3.   build() {
4.     Column(){
5.       Text('小说简介')
6.         .margin(10)
7.         .fontSize(24)
8.         .fontWeight(FontWeight.Bold)
9.         .fontColor(Color.Pink)
10.       Row(){
11.         Text('都市')
12.           .fontSize(20)
13.           .fontColor(Color.Green)
14.         Text('言情')
15.           .margin(10)
16.           .fontColor(Color.White)
17.         Text('生活')
18.           .fontSize(20)
19.           .margin(10)
20.           .fontColor(Color.Blue)
21.         Text('男频')
22.           .fontColor(Color.White)
23.       }
24.       .margin(10)
25.     }
26.     .width('100%')
27.     .backgroundColor('#afb1b3')
28.   }
29. }

复制代码

笔墨溢出省略号，行高

1.   Column(){
2.         Text('鸿蒙开发初体验')
3.           .width('100%')
4.           .fontSize(24)
5.           .fontWeight(FontWeight.Bold)
6.         Text('文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高')
7.           .width('100%')
8.           .textOverflow({
9.             overflow:TextOverflow.Ellipsis
10.           })
11.           .maxLines(2)
12.           .lineHeight(30)
13.       }

复制代码

 图片组件使用

1. //   图片
3.       Column(){
4.         Row(){
5.           Text('网络图片        ')
6.           Image('https://www.itheima.com/images/logo.png')
7.             .width(200)
8.         }
9.         Column(){
10.           Image($r('app.media.Img01'))
11.             .width(200)
12.             .margin(20)
13.           Row(){
14.             Image($r('app.media.img02')).width(50) .margin(10)
15.             Text('网络图片')
16.           }
17.         }
18.         .margin(20)
19.         .width('100%')
20.       }

复制代码

输入框和按钮 

1. @Entry
2. @Component
3. struct inputBtn {
5.   build() {
6.     Column({space:20}){
7.       TextInput({
8.         placeholder:'请输入用户名'
9.       })
10.       TextInput({
11.         placeholder:'请输入密码'
12.       })
13.         .type(InputType.Password)
14.       Button('登录')
15.         .width(100)
16.     }
17.     .width(300)
18.   }
19. }

复制代码

登录页面训练 

1. @Entry
2. @Component
3. struct Login {
5.   build() {
6.     Column({space:20}){
7.       Image($r('app.media.img02')).width(100)
9.       Column({space:20}){
10.         TextInput({
11.           placeholder:'请输入用户名'
12.         })
13.         TextInput({
14.           placeholder:'请输入密码'
15.         })
16.           .type(InputType.Password)
17.         Button('登录')
18.           .width('100%')
19.       }
21.       Row({space:20}){
22.         Text('前往注册')
23.         Text('忘记密码')
24.       }
26.     }.padding(20)
28.   }
29. }

复制代码

Svg图标 

布局元素构成

内边距

外边距

边框

训练

1. @Entry
2. @Component
3. struct QQLogin {
4. @State user:string = '大王叫我来巡山'
5.   build() {
6.     Column(){
7.       Image($r('app.media.img02')).width(100).borderRadius(50)
9.       Text(this.user).margin({
10.         top:20,
11.         bottom:40
12.       })
14.       Column({space:15}){
15.         Button('QQ登录')
16.           .width('100%')
17.         Button('微信登录')
18.           .width('100%')
19.           .backgroundColor('#dfdfdf')
20.           .fontColor('#1e1e1e')
21.       }
23.       Row({space:20}){
24.         Text('前往注册')
25.         Text('忘记密码')
26.       }.margin({
27.         top:20
28.       })
30.     }.padding(20)
32.   }
33. }

复制代码

 

圆角

 特殊形状圆角

背景属性

背景图

背景图位置 

背景图单位

默认单位是px

背景图尺寸 

线性布局

主轴对齐

交织轴对齐

自适应伸缩

得物卡片

1. @Entry
2. @Component
3. struct DeWuCard {
4.   build() {
5.     Column(){
6.       Image($r('app.media.img02'))
7.         .width('100%')
8.         .height(250)
9.         .borderRadius({
10.           topLeft:10,
11.           topRight:10
12.         })
13.       Text('今晚吃这个 | 每日艺术分享')
14.         .width('100%')
15.         .padding({
16.           top:20,
17.           right:10,
18.           left:10,
19.           bottom:20
20.         })
21.         .fontSize(20)
22.         .fontWeight(FontWeight.Bold)
23.       Row(){
24.         Image($r('app.media.img02'))
25.           .width(25)
26.           .margin({
27.             right:5
28.           })
29.         Text('插画师分享聚集地')
30.           .layoutWeight(1)
31.         Image($r('app.media.img02'))
32.           .width(25)
33.           .margin({
34.             right:5
35.           })
36.         Text('2300')
37.           .width(40)
38.       }
39.       .margin(10)
40.     }
41.     .width(300)
42.     .height(360)
43.     .backgroundColor(Color.Pink)
44.     .borderRadius(10)
46.   }
48. }

复制代码

京东登录案例

1. @Entry
2. @Component
3. struct JDLogin {
4.   build() {
5.     Column(){
6.       Row(){
7.         Image($r('app.media.cancel'))
8.           .height(20)
9.         Text('帮助')
10.       }
11.       .width('100%')
12.       .height(30)
13.       .justifyContent(FlexAlign.SpaceBetween)
15.       Image($r('app.media.jdlogo'))
16.         .width(200)
17.         .margin({
18.           top:50,
19.           bottom:30
20.         })
22.     //   表单
23.       Row(){
24.         Text('国家/地址')
25.           .fontColor('#666')
26.           .height(16)
27.           .layoutWeight(1)
28.         Text('中国(+86)')
29.           .fontColor('#666')
30.           .height(16)
31.         Image($r('app.media.ic_arrow_right'))
32.           .fillColor('#666')
33.           .height(16)
34.       }
35.       .backgroundColor('#fff')
36.       .width('100%')
37.       .padding(10)
38.       .height(40)
39.       .borderRadius(20)
41.       Row(){
42.         TextInput({
43.           placeholder:'请输入手机号'
44.         })
45.           .placeholderColor('#666')
46.           .height('100%')
47.           .padding(0)
48.           .backgroundColor('#fff')
49.       }
50.       .backgroundColor('#fff')
51.       .width('100%')
52.       .padding(10)
53.       .height(40)
54.       .borderRadius(20)
55.       .margin({top:20,bottom:20})
57.     //   条款
58.       Row(){
59.         Checkbox().width(10)
60.         Text(){
61.           Span('我已经阅读并同意')
62.           Span('《京东隐私政策》《京东用户协议》')
63.             .fontColor('#3274f6')
64.           Span('未注册的手机号将自动创建京东账号')
65.         }
66.         .width('100%')
67.         .fontSize(12)
68.         .fontColor('#666')
69.       }
70.       .width('100%')
71.       .margin({right:20,bottom:25})
72.       .alignItems(VerticalAlign.Top)
74.       Button('登录').width('100%').backgroundColor('#bf2838')
76.       Row({space:25}){
77.         Text('注册新用户')
78.           .fontSize(14)
79.         Text('账户密码登录')
80.           .fontSize(14)
81.         Text('无法登录')
82.           .fontSize(14)
83.       }
84.       .margin({top:15})
86.     //   其他
87.       Blank()
89.       Column(){
90.         Text('其他登录方式')
91.           .fontSize(14)
92.           .height(22)
93.           .fontColor('#666')
94.         Row(){
95.           Image($r('app.media.jd_huawei'))
96.             .width(34)
97.           Image($r('app.media.jd_wechat'))
98.             .width(34)
99.           Image($r('app.media.jd_weibo'))
100.             .width(34)
101.           Image($r('app.media.jd_QQ'))
102.             .width(34)
103.         }
104.         .width('100%')
105.         .padding(28)
106.         .justifyContent(FlexAlign.SpaceBetween)
107.       }
108.       .height(100)
111.     }
112.     .padding(20)
113.     .width('100%')
114.     .height('100%')
115.     .linearGradient({
116.       angle:135,
117.       direction:GradientDirection.RightBottom,
118.       colors:[[0xb6d4d5,0.0],[0xebebeb,0.3],[0xf7e9e8,0.5],[0xffffff,1.0]]
119.     })
120.   }
121. }

复制代码

弹性布局

例子 

1. @Entry
2. @Component
3. struct Login {
5.   build() {
6.     Flex({
7.       direction:FlexDirection.Column,
8.       justifyContent:FlexAlign.Center,
9.       alignItems:ItemAlign.Center
10.     }){
11.       Text().width(100).height(100).backgroundColor(Color.Pink).border({
12.         width:1,
13.         color:Color.Black })
14.       Text().width(100).height(100).backgroundColor(Color.Pink).border({
15.         width:1,
16.         color:Color.Black })
17.       Text().width(100).height(100).backgroundColor(Color.Pink).border({
18.         width:1,
19.         color:Color.Black })
20.     }.width('100%').height(600).backgroundColor(Color.Green)
22.   }
23. }

复制代码

换行

Grid布局

例子：

间隙：

角标组件Badge

绝对定位和zIndex层级

1. @Entry
2. @Component
3. struct JDLogin {
4.   build() {
5.     Column(){   
6.     Text().width(100).height(100).backgroundColor(Color.Yellow).border({
7.         width:1,
8.         color:Color.Black })
9.         .position({
10.           x:50,
11.           y:100
12.         })
13.         .zIndex(-1)
14. }
15. }
16. }

复制代码

层叠布局

B站卡片案例

1. @Entry
2. @Component
3. struct Login {
5.   build() {
6.     Column(){
7.       Column(){
8.         Stack({alignContent:Alignment.Bottom}){
9.           Image($r('app.media.img02')).width('100%').height('100%')
10.             .borderRadius({topLeft:20,topRight:20})
12.           Row(){
13.             Row({space:5}){
14.               Image($r('app.media.jd_wechat')).width(16)
15.               Text('288万').fontColor(Color.White)
16.             }.margin({right:10})
17.             Row({space:5}){
18.               Image($r('app.media.jd_wechat')).width(16)
19.               Text('288万').fontColor(Color.White)
20.             }.layoutWeight(1)
22.             // 除了写.layoutWeight(1)，也可以写
23.             // Blank()
25.             Text('4:33').fontColor(Color.White)
26.           }.width('100%').height(30).alignItems(VerticalAlign.Center).padding({right:5,left:5})
28.         }.width(300).height(160)
30.       //   文字
31.         Text('【凤凰传奇新歌】欧迎来到国风统治区:唢呐一响神曲《铁衣【凤凰传奇新歌】欧迎来到国风统治区:唢呐一响神曲《铁衣')
32.           .lineHeight(20).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(2)
33.           .padding(10)
35.         Row(){
36.           Text('19万点赞').backgroundColor('#fff1f0').fontColor('#c77a60').padding(5)
37.           Image($r('app.media.jd_wechat')).width(16).margin({right:5})
38.         }.width('100%').justifyContent(FlexAlign.SpaceBetween).padding(10)
40.       }.width(300).height(270).borderRadius(20).backgroundColor(Color.White)
41.     }.width('100%').height('100%').backgroundColor('#f6f8fa')
42.   }
43. }

复制代码

阶段综合-付出宝首页

1. @Entry
2. @Component
3. struct ZfbHome {
5.   build() {
6.     Stack({alignContent:Alignment.Bottom}){
8.       Stack({alignContent:Alignment.Top}){
9.         // 顶部搜索
10.         Row(){
11.           Column(){
12.             Row(){
13.               Text('重庆').fontColor(Color.White)
14.               Image($r('app.media.top_down')).width(20).fillColor(Color.White)
15.             }
16.             Text('晴 2℃').fontColor(Color.White).fontSize(14)
17.           }.height(33).alignItems(HorizontalAlign.Start)
19.           Row(){
20.             Image($r('app.media.top_sousuo')).width(20)
22.             TextInput({
23.               placeholder:'重庆交通一卡通'
24.             }).placeholderColor('#666').layoutWeight(1)
26.             Text('搜索').fontColor('#4c74ef').width(55).border({ width:{left:1},color:'#e9e9e9'}).textAlign(TextAlign.Center)
28.           }.height(33).backgroundColor(Color.White).borderRadius(10)
29.           .margin({left:12,right:12}).padding({left:10,right:10}).layoutWeight(1)
31.           Image($r('app.media.top_add')).width(30).fillColor(Color.White)
33.         }.width('100%').height(60).padding({left:10,right:10})
34.         .backgroundColor('#6681ea').zIndex(2)
36.         // 内容
37.         Scroll(){
38.           Column(){
39.             Row(){
40.               Column(){
41.                 Image($r('app.media.head_sao')).width(28)
42.                 Text('扫一扫').fontColor(Color.White)
43.               }
44.               Column(){
45.                 Image($r('app.media.head_shoufukuan')).width(28)
46.                 Text('收付款').fontColor(Color.White)
47.               }
48.               Column(){
49.                 Image($r('app.media.head_chuxing')).width(28)
50.                 Text('出行').fontColor(Color.White)
51.               }
52.               Column(){
53.                 Image($r('app.media.head_car')).width(28)
54.                 Text('卡包').fontColor(Color.White)
55.               }
56.             }.width('100%').margin({bottom:20})
57.             .justifyContent(FlexAlign.SpaceAround).alignItems(VerticalAlign.Center)
59.             Column(){
60.               // 多功能
61.               Flex({
62.                 direction:FlexDirection.Row,
63.                 justifyContent:FlexAlign.SpaceAround,
64.                 alignContent:FlexAlign.SpaceAround,
65.                 wrap:FlexWrap.Wrap
66.               })
67.               {
68.                 Column(){
69.                   Image($r('app.media.dd')).width(28)
70.                   Text('滴滴')
71.                 }.width('20%')
72.                 Column(){
73.                   Image($r('app.media.dd')).width(28)
74.                   Text('滴滴')
75.                 }.width('20%')
76.                 Column(){
77.                   Image($r('app.media.dd')).width(28)
78.                   Text('滴滴')
79.                 }.width('20%')
80.                 Column(){
81.                   Image($r('app.media.dd')).width(28)
82.                   Text('滴滴')
83.                 }.width('20%')
84.                 Column(){
85.                   Image($r('app.media.dd')).width(28)
86.                   Text('滴滴')
87.                 }.width('20%')
88.                 Column(){
89.                   Image($r('app.media.dd')).width(28)
90.                   Text('滴滴')
91.                 }.width('20%')
92.                 Column(){
93.                   Image($r('app.media.dd')).width(28)
94.                   Text('滴滴')
95.                 }.width('20%')
96.                 Column(){
97.                   Image($r('app.media.dd')).width(28)
98.                   Text('滴滴')
99.                 }.width('20%')
100.                 Column(){
101.                   Image($r('app.media.dd')).width(28)
102.                   Text('滴滴')
103.                 }.width('20%')
104.                 Column(){
105.                   Image($r('app.media.dd')).width(28)
106.                   Text('滴滴')
107.                 }.width('20%')
108.                 Column(){
109.                   Image($r('app.media.dd')).width(28)
110.                   Text('滴滴')
111.                 }.width('20%')
112.                 Column(){
113.                   Image($r('app.media.dd')).width(28)
114.                   Text('滴滴')
115.                 }.width('20%')
116.                 Column(){
117.                   Image($r('app.media.dd')).width(28)
118.                   Text('滴滴')
119.                 }.width('20%')
120.                 Column(){
121.                   Image($r('app.media.dd')).width(28)
122.                   Text('滴滴')
123.                 }.width('20%')
124.                 Column(){
125.                   Image($r('app.media.dd')).width(28)
126.                   Text('滴滴')
127.                 }.width('20%')
129.               }.width('100%').height(170)
130.               .backgroundColor(Color.White).borderRadius({topLeft:20,topRight:20})
132.               //   推荐
133.               Row(){
134.                 Column(){
135.                   Stack({alignContent:Alignment.Top}){
136.                     Text().width('100%').height(40).backgroundColor('#fde5ff')
137.                     Text('官方收钱码').padding(6).fontColor('#d6b5d9').fontSize(12).fontWeight(600)
138.                       .backgroundColor('#FFF').borderRadius({bottomRight:10,bottomLeft:10})
139.                   }
141.                   Column(){
142.                     Text('收钱码站出来').fontWeight(700).fontColor('#af6ac6').fontSize(15)
143.                     Text('最高100元奖励').fontColor('#d6b5d9').fontSize(14)
144.                     Image($r('app.media.shouju')).height(80).position({y:50,x:10})
146.                   }.layoutWeight(1)
148.                 }.height('100%').width(110).borderRadius(10).backgroundColor(Color.White)
150.                 Column(){
151.                   Row({space:2})
152.                   {
153.                     Image($r('app.media.jd_huawei')).width(20)
154.                     Text('消费圈').fontWeight(600)
155.                     Text('便宜').padding(4).linearGradient({
156.                       angle:90,
157.                       direction:GradientDirection.Right,
158.                       colors:[[0xd79b5e,0.0],[0xda5e7a,1.0]]
159.                     }).borderRadius(10).fontColor(Color.White).fontSize(11)
160.                   }.width('100%').height(40).linearGradient({
161.                     angle:90,
162.                     direction:GradientDirection.Right,
163.                     colors:[[0xfde3d2,0.0],[0xfdeee5,1.0]]
164.                   })
166.                   Image($r('app.media.img02')).width(80).margin({top:12,bottom:15})
168.                   Row(){
169.                     Image($r('app.media.jd_wechat')).width(30)
170.                     Column(){
171.                       Text('买绿色商品').fontSize(13).fontWeight(600)
172.                       Text('得森林能量').fontSize(13).fontColor('#b5b5b5')
173.                     }
174.                   }
176.                 }.height('100%').width(110).borderRadius(10).backgroundColor(Color.White)
178.                 Column(){
179.                   Row({space:2})
180.                   {
181.                     Image($r('app.media.jd_huawei')).width(20)
182.                     Text('理好财').fontWeight(600)
183.                     Text('精选').padding(4).linearGradient({
184.                       angle:90,
185.                       direction:GradientDirection.Right,
186.                       colors:[[0xd79b5e,0.0],[0xda5e7a,1.0]]
187.                     }).borderRadius(10).fontColor(Color.White).fontSize(11)
188.                   }.width('100%').height(40).linearGradient({
189.                     angle:90,
190.                     direction:GradientDirection.Right,
191.                     colors:[[0xd5e6fe,0.0],[0xe7efff,1.0]]
192.                   })
194.                   Image($r('app.media.img02')).width(80).margin({top:12,bottom:15})
196.                   Row(){
197.                     Image($r('app.media.jd_wechat')).width(30)
198.                     Column(){
199.                       Text('买绿色商品').fontSize(13).fontWeight(600)
200.                       Text('得森林能量').fontSize(13).fontColor('#b5b5b5')
201.                     }
202.                   }
204.                 }.height('100%').width(110).borderRadius(10).backgroundColor(Color.White)
205.               }.width('100%').height(160).justifyContent(FlexAlign.SpaceAround).margin({top:10})
207.               //   视频
208.               Row(){
209.                 Column(){
210.                   Row({space:10}){
211.                     Image($r('app.media.dd')).width(25)
212.                     Text('市民中心·城市发布').fontWeight(700)
213.                   }.width('100%').margin({bottom:10})
215.                   Text('在重庆退休后能领多少养老金？').font({
216.                     size:14,
217.                     weight:600
218.                   }).lineHeight(20)
220.                   Row({space:20}){
221.                     Text('怎样计算？').fontSize(14).fontColor('#c1c1c1')
222.                     Text('政务办事').fontSize(14).padding(2).backgroundColor('#f9eccf').fontColor('#c88757')
223.                   }.margin({bottom:20})
225.                   Text('去看看').fontSize(16).fontWeight(600).padding(10)
226.                     .backgroundColor('#f9eccf').fontColor('#c88757').borderRadius(10)
228.                 }.layoutWeight(1).alignItems(HorizontalAlign.Start)
230.                 Stack({
231.                   alignContent:Alignment.TopStart
232.                 })
233.                 {
234.                   Image($r('app.media.Img01')).borderRadius(10)
235.                   Image($r('app.media.play')).width(30)
236.                 }.width(130)
238.               }.width('100%').height(160).padding(10).margin({top:20,bottom:20}).backgroundColor(Color.White)
240.               //   消费圈
241.               Flex(){}
243.             }.width('100%').backgroundColor('#f8f8f8').borderRadius({topLeft:20,topRight:20})
245.           }.width('100%').padding({top:60,bottom:60})
246.           .backgroundColor('#6681ea')
248.         }
249.       }
251.       // 底部Tab
252.       Row(){
253.         Column(){
254.           Image($r('app.media.tab_zfb')).width(40)
255.         }
256.         Column(){
257.           Image($r('app.media.tab_licai')).width(28)
258.           Text('理财')
259.         }
260.         Column(){
261.           Image($r('app.media.tab_life')).width(28)
262.           Text('生活')
263.         }
264.         Column(){
265.           Image($r('app.media.tab_xiaoxi')).width(28)
266.           Text('消息')
267.         }
268.         Column(){
269.           Image($r('app.media.tab_i')).width(28)
270.           Text('我的')
271.         }
272.       }.width('100%').height(60).backgroundColor(Color.White)
273.       .justifyContent(FlexAlign.SpaceAround).alignItems(VerticalAlign.Center)
275.     }.width('100%').height('100%').backgroundColor(Color.Pink)
276.   }
277. }

复制代码

字符串拼接

模板字符串

范例转换（数字和字符串）

字符串转数字

数字转字符串

交互

点击事件

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = 'Hello World';
6.   build() {
7.     Column(){
8.       Button('点击喔')
9.         .onClick(()=>{
10.           AlertDialog.show({
11.             message:'你好~这是个弹窗'
12.           })
13.         })
14.     }
15.   }
16. }

复制代码

状态管理

2. // 普通变量
3. let msg:string='我是组件外普通变量'
4. @Entry
5. @Component
6. struct Index {
7.   @State message: string = 'Hello World';
8.   msg1:string='我是组件内普通变量'
9.   msg2:string='我是组件内普通变量2'
11.   build() {
12.     Column(){
13.       Text(msg)
14.       Text(this.msg1)
15.       Button(this.message)
16.         .onClick(()=>{
17.           AlertDialog.show({
18.             message:'你好~这是个弹窗'
19.           })
20.           this.message = '已经点击了'
21.         })
22.     }
23.   }
24. }

复制代码

计算器案例

1. @Entry
2. @Component
3. struct CounterPage{
4. @State num:number = 0
5.   build() {
6.     Row({space:10}){
7.       Button('-')
8.         .onClick(()=>{
9.           this.num--
10.         })
11.       Text(this.num.toString())
12.       Button('+')
13.         .onClick(()=>{
14.           this.num++
15.         })
16.     }
17.   }
18. }

复制代码

运算符

算数运算符

赋值运算符

点赞案例

1. @Entry
2. @Component
3. struct CounterPage{
5.   @State count:number=999
6.   @State supportColor:string =''
7.   @State supportState:boolean = false
8.   build() {
9.     Column({space:10}){
10.    
12.     //   爱心
13.       Row({space:10}){
14.         Image($r('app.media.love')).width(30).fillColor(this.supportColor)
15.         Text(this.count.toString()).fontColor(this.supportColor)
16.       }
17.       .onClick(()=>{
18.         if(this.supportState){
19.           this.supportColor = ''
20.           this.count --
21.           this.supportState = false
22.         }else{
23.           this.supportColor = '#8f1422'
24.           this.count ++
25.           this.supportState = true
26.         }
29.       })
30.     }
32.   }
33. }

复制代码

一元运算符

比较运算符

逻辑运算符 

 

运算符优先级

美团购物车案例

1. @Entry
2. @Component
3. struct ShoppingCart{
4.   // 原价
5.   @State priced:number=30
6.   // 单价
7.   @State unitPrice:number=20.2
8.   // 数量
9.   @State quantity:number=0
10.   // 总价
11.   @State allPrice:number=0
12.   // 优惠
13.   @State preferential:number=0
14.   build() {
15.     Stack({
16.       alignContent:Alignment.Bottom
17.     })
18.     {
19.       // 商品列表
20.       Column(){
21.         Row({space:5}){
22.           Image($r('app.media.img02')).width(110).borderRadius(10)
24.           Column({space:6}){
25.             Text('冲销量1000ml缤纷八果水果捞').width('100%').font({size:14,weight:600})
26.             Text('含1份折扣商品').width('100%').font({size:12}).fontColor('#8c8c8c')
27.             Blank()
29.             Row(){
30.               Text(`￥${this.unitPrice}`).fontColor('#bd342a')
31.               Text(`￥${this.priced}`).font({size:12}).fontColor('#8c8c8c').decoration({type:TextDecorationType.LineThrough}).margin({left:5})
32.               Blank()
33.               Row(){
34.                 Text('-').width(20).height('100%').border({width:1,color:'#979797'}).textAlign(TextAlign.Center).fontWeight(600).borderRadius({topLeft:5,bottomLeft:5})
35.                   .onClick(()=>{
36.                     if(this.quantity == 0) return
37.                     this.quantity --
38.                     this.allPrice = this.quantity * this.unitPrice
39.                     this.preferential = this.quantity * (this.priced - this.unitPrice)
40.                   })
42.                 Text(this.quantity.toString()).layoutWeight(1).height('100%').border({width:{top:1,bottom:1},color:'#979797'}).textAlign(TextAlign.Center).fontWeight(600)
44.                 Text('+').width(20).height('100%').border({width:1,color:'#979797'}).textAlign(TextAlign.Center).fontWeight(600).borderRadius({topRight:5,bottomRight:5})
45.                   .onClick(()=>{
46.                     this.quantity ++
47.                     this.allPrice = this.quantity * this.unitPrice
48.                     this.preferential = this.quantity * (this.priced - this.unitPrice)
49.                   })
50.               }.width(75).height(25)
52.             }.width('100%')
54.           }.layoutWeight(1).height('100%')
56.         }.height(83).width('100%')
58.       }.width('100%').height('100%').padding(10)
60.       // 结算
61.       Row({space:10}){
62.         Column(){
63.             Text(){
64.               Span(`已选 ${this.quantity} 件,`).fontColor('#919191')
65.               Span('合计：')
66.               Span(`￥${this.allPrice.toFixed(2)}`).fontColor('#bd342a')
67.             }.fontSize(14)
69.           Text(`共减￥${this.preferential.toFixed(2)}`).fontColor('#bd342a').fontSize(12)
70.         }.layoutWeight(1).alignItems(HorizontalAlign.End)
72.         Text('结算外卖').width(100).height(40).backgroundColor('#ffd441').font({size:17,weight:600}).textAlign(TextAlign.Center).borderRadius(20)
74.       }.width('100%').height(100).backgroundColor(Color.White).padding(20)
75.     }.backgroundColor('#f3f3f3').width('100%').height('100%')
76.   }
77. }

复制代码

数组操作

语句

if分支语句

if多分支

switch分支

三元条件表达式

条件渲染

条件渲染案例

2. @Entry
3. @Component
4. struct JDAddCart {
5.   // 库存状态
6.   @State inventoryStatus:boolean = true
7.   build() {
8.     Column(){
9.       if(this.inventoryStatus){
10.         Text('还有一件商品')
11.       }else {
12.         Text('没有商品')
13.       }
14.       Row(){
15.         Column(){
16.           Image($r('app.media.love')).width(28)
17.           Text('店铺')
18.         }
19.         Column(){
20.           Image($r('app.media.love')).width(28)
21.           Text('店铺')
22.         }
23.         Column(){
24.           Image($r('app.media.love')).width(28)
25.           Text('店铺')
26.         }
27.         if(this.inventoryStatus){
28.           Text('加入购物车').width(100).height('100%').backgroundColor('#ffc73e').fontColor(Color.White).borderRadius(20).textAlign(TextAlign.Center)
29.           Text('立即购买').width(100).height('100%').backgroundColor('#fa0028').fontColor(Color.White).borderRadius(20).textAlign(TextAlign.Center)
30.         }else {
31.           Text('查看类似商品').width(170).height('100%').backgroundColor('#ffc73e').fontColor(Color.White).borderRadius(20).textAlign(TextAlign.Center)
32.         }
33.       }.width('100%').height(60).justifyContent(FlexAlign.SpaceAround)
34.       Button('切换').onClick(()=>{
35.         this.inventoryStatus = !this.inventoryStatus
36.       })
37.     }
38.   }
39. }

复制代码

循环语句

while循环

 for循环

退出循环

遍历数组

for()

for...of

对象数组

ForEach-渲染控制

1. interface  Article{
2.   title:string,
3.   createTime:string
4. }
5. @Entry
6. @Component
7. struct JDAddCart {
9.   @State articles:Article[]=[
10.     {
11.       title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程',
12.       createTime:'2024-01-31 09:59:43'
13.     },
14.     {
15.       title:'MySQL Shell 8.0.32 for GreatsQL编译二进制包',
16.       createTime:'2024-01-31 09:55:53'
17.     },
18.     {
19.       title:'在Redis中如何实现分布式事务的一致性?',
20.       createTime:'2024-01-31 09:54:51'
21.     },
22.   ]
23.   build() {
24.     Column(){
26.       Column({space:20}){
27.         ForEach(this.articles,(item:Article,index)=>{
28.           Column({space:10}){
29.             Text(item.title).fontSize(16).fontWeight(600).width('100%')
30.             Text(item.createTime).fontSize(12).fontColor('#cdcdcd').width('100%')
31.           }.width('100%').border({width:{bottom:2},color:'#cdcdcd'}).padding(10)
32.         })
33.       }.width('100%')
34.     }
35.   }
36. }

复制代码

生肖卡抽奖案例

1. import { JSON } from '@kit.ArkTS'
3. interface ZodiacCardItem{
4.   url:string,
5.   activeUrl:string,
6.   count:number
7. }
8. // const t:number =  Math.floor(Math.random() *6)
9. // console.log( '随机树：',t)
10. @Entry
11. @Component
12. struct ZodiacDraw {
13. //   卡片数据
14.   @State zodiacCards:ZodiacCardItem[] = [
15.     { url:'app.media.dog',activeUrl:'app.media.active_dog',count:1},
16.     { url:'app.media.hu',activeUrl:'app.media.active_hu',count:1},
17.     { url:'app.media.long',activeUrl:'app.media.active_long',count:1},
18.     { url:'app.media.ma',activeUrl:'app.media.active_ma',count:0},
19.     { url:'app.media.niu',activeUrl:'app.media.active_niu',count:1},
20.     { url:'app.media.tu',activeUrl:'app.media.active_tu',count:1}
21.   ]
22.   // 页面层次
23.   @State takePagezIndex:number = -1
24.   @State takePageOpacity:number = 0
26.   @State phoneStatus:boolean = true
28.   // 抽中下标
29.   @State drawnIndex:number = -1
31.   // 抽中动画
32.   @State drawnScale:number = 0
34.   // 中奖奖池
35.   @State prizePools:string[] = ['phone','huawei','xiaomi']
36.   @State prize:string = ''
37.   build() {
38.     Stack(){
39.       // 抽奖页
40.       Column(){
41.         Grid(){
42.           ForEach(this.zodiacCards,(item:ZodiacCardItem,index)=>{
43.             GridItem(){
44.               Badge({
45.                 count:item.count,
46.                 position:BadgePosition.RightTop,
47.                 style:{
48.                   fontSize:14,
49.                   badgeSize:20,
50.                   badgeColor:'#fa2a2d'
51.                 }
52.               })
53.               {
54.                 // 如果count不为0，就渲染激活图片
55.                 Image($r(`${item.count == 0 ? item.url : item.activeUrl}`))
56.                   .width(90).border({width:{left:1,bottom:1},color:'#ffd4d4d4'})
57.               }
59.             }
61.           })
63.         }
64.         .width('100%').height(300)
65.         .margin({top:60,bottom:50})
66.         .columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr')
68.         Button('立即抽卡')
69.           .backgroundColor('#ed4481').width(300)
70.           .onClick(()=>{
71.             // 结果页出
72.             this.takePagezIndex = 1
73.             this.takePageOpacity = 1
74.             // 动画
75.             this.drawnScale =1
76.             // 结果卡片 随机
77.             this.drawnIndex = Math.floor(Math.random() *6)
79.           })
80.       }
82.       // 抽奖结果页
83.       Column({space:25}){
84.         Text('获得生肖卡').fontColor('#fff').fontSize(20)
86.         Image($r(`${this.drawnIndex !==-1?this.zodiacCards[this.drawnIndex].activeUrl:null}`))
87.           .width(140).borderRadius(20)
88.           .scale({x:this.drawnScale,y:this.drawnScale}).animation({duration:500})
90.         Button('开心收下')
91.           .width(140).backgroundColor('#00000000').border({width:1,color:'#fff'})
92.           .onClick(()=>{
93.             // 结果页出
94.             this.takePagezIndex = -1
95.             this.takePageOpacity = 0
97.             //   结果卡片
98.             // 处理数组数据,对象数组的情况需要更新，就得修改整个对象
99.             this.zodiacCards[this.drawnIndex] = {
100.               url:this.zodiacCards[this.drawnIndex].url,
101.               activeUrl:this.zodiacCards[this.drawnIndex].activeUrl,
102.               count:this.zodiacCards[this.drawnIndex].count + 1
103.             }
105.           //   判断是否集齐卡片
106.            this.phoneStatus = this.zodiacCards.some((item)=>item.count == 0)
107.           //   判断方法2
108.           //   let flag:boolean=true
109.           //   for (let item of this.zodiacCards){
110.           //     if(item.count ==0){
111.           //       flag = false
112.           //       break
113.           //     }
114.           //   }
116.           //   如果集齐
117.             if(!this.phoneStatus){
118.               const randomIndex = Math.floor(Math.random() * 3)
119.               this.prize = this.prizePools[randomIndex]
120.             }
121.           })
123.       }
124.       .width('100%').height('100%')
125.       .backgroundColor('#bc000000')
126.       .justifyContent(FlexAlign.Center)
127.       .zIndex(this.takePagezIndex)
128.       .opacity(this.takePageOpacity)
129.       .animation({duration:300})
131.     //   手机页
132.       if(!this.phoneStatus){
133.         Column({space:25}){
134.           Text('恭喜获得手机一部').fontColor('#fff').fontSize(20)
136.           Image($r(`app.media.${this.prize}`))
137.             .width(300).borderRadius(20)
138.             .scale({x:this.drawnScale,y:this.drawnScale}).animation({duration:500})
140.           Button('再来一次')
141.             .width(140).backgroundColor('#00000000').border({width:1,color:'#fff'})
142.             .onClick(()=>{
143.             //   将之前卡片所有数量-1
144.             //   let arr:ZodiacCardItem[] =[]
145.             //   this.zodiacCards.forEach((item:ZodiacCardItem)=>{
146.             //     let obj:ZodiacCardItem = {
147.             //       url: item.url,
148.             //       activeUrl: item.activeUrl,
149.             //       count:  item.count - 1
150.             //     }
151.             //     arr.push(obj)
152.             //   })
153.             //   this.zodiacCards= arr
155.             //   方法2
156.               this.zodiacCards = this.zodiacCards.map((item: ZodiacCardItem) => ({
157.                 url: item.url,
158.                 activeUrl: item.activeUrl,
159.                 count:  item.count - 1
160.               }) as ZodiacCardItem)
162.               this.phoneStatus = true
164.             })
166.         }
167.         .width('100%').height('100%')
168.         .backgroundColor('#bc000000')
169.         .justifyContent(FlexAlign.Center)
170.         .animation({duration:300})
171.       }
174.     }
175.   }
176. }

复制代码

swiper轮播组件

基本用法

需要给swiper设置尺寸，若不设置则是内容自动撑开，也可以给内容每个单独设置。

1. @Entry
2. @Component
3. struct SwiperPage {
4.   build() {
5.     Column(){
6.       Swiper(){
7.         Text('你好').backgroundColor(Color.Blue)
8.         Text('我是').backgroundColor(Color.Gray)
9.         Text('大大').backgroundColor(Color.Green)
10.       }.width('100%').height(150)
12.       Swiper(){
13.         Image($r('app.media.active_niu'))
14.         Image($r('app.media.active_ma'))
15.         Image($r('app.media.active_long'))
16.         Image($r('app.media.active_hu'))
17.       }.width(150).height(200).margin({top:20}).border({width:1})
18.     }
21.   }
22. }

复制代码

常见属性

1. @Entry
2. @Component
3. struct SwiperPage {
4.   build() {
5.     Column(){
6.       Swiper(){
7.         Text('你好').backgroundColor(Color.Blue)
8.         Text('我是').backgroundColor(Color.Gray)
9.         Text('大大').backgroundColor(Color.Green)
10.       }.width('100%').height(150)
11.       .loop(true)
12.       .autoPlay(true)
13.       .interval(2000)
15.       Swiper(){
16.         Image($r('app.media.active_niu'))
17.         Image($r('app.media.active_ma'))
18.         Image($r('app.media.active_long'))
19.         Image($r('app.media.active_hu'))
20.       }.width('100%').height(400).margin({top:20}).border({width:1})
21.       .loop(true)
22.       .autoPlay(true)
23.       .interval(3000)
24.       .vertical(true)
25.     }
26.   }
27. }

复制代码

样式自定义

aspectRatio()宽高比属性，设置和图片一致的宽高比，包管图片正常适配

代码演示

1. @Entry
2. @Component
3. struct SwiperPage {
4.   build() {
5.     Column(){
7.       Swiper(){
8.         Image($r('app.media.active_niu'))
9.         Image($r('app.media.active_ma'))
10.         Image($r('app.media.active_long'))
11.         Image($r('app.media.active_hu'))
12.       }.width('100%').aspectRatio(0.85).margin({top:20}).border({width:1})
13.       .loop(true)
14.       .autoPlay(true)
15.       .interval(4000)
16.       .indicator(
17.         Indicator.dot()
18.           .itemWidth(10)
19.           .selectedItemWidth(30)
20.           .selectedColor(Color.Green)
21.       )
23.     }
24.   }
25. }

复制代码

样式&结构的重用

@Extend：扩展组件（样式，事件）【偏重组件】

@Extend(扩展组件) Extend的参数是需要扩展的组件如Text,Column等
实用特定组件 样式、事件

1. @Extend(Text)
2. function txtFn (){
3.   .fontSize(20)
4.   .fontWeight(FontWeight.Bolder)
5.   .margin({bottom:20})
6. }
8. @Extend(Text)
9. function swiperTxtFn (bgColor:ResourceColor,msg:string) {
10.   .textAlign(TextAlign.Center)
11.   .fontSize(20)
12.   .fontWeight(FontWeight.Bolder)
13.   .fontColor(Color.White)
14.   .backgroundColor(bgColor)
15.   .onClick(()=>{
16.     AlertDialog.show({
17.       message:msg
18.     })
19.   })
20. }
22. @Entry
23. @Component
24. struct ExtendPage {
25.   build() {
26.     Column(){
27.       Text('@Extend：扩展组件（样式，事件）').txtFn()
28.       Swiper(){
29.         Text('你好').swiperTxtFn(Color.Gray,'你好轮播')
30.         Text('我是').swiperTxtFn(Color.Green,'我是轮播')
31.         Text('大大').swiperTxtFn(Color.Red,'轮播大大')
32.       }.width('100%').height(150)
33.       .loop(true)
34.       .autoPlay(true)
35.       .interval(2000)
37.     }
38.   }
39. }

复制代码

@Styles：抽取通用属性，事件【偏重样式】

@Styles不支持传参，最好写组件内
实用公共样式、事件，不可以传参

1. // 全局定义style
2. @Styles function  commonStyles (){
3.   .width(100)
4.   .height(100)
5. }
8. @Entry
9. @Component
10. struct StylePage {
11.   @State bgColor:ResourceColor = Color.Gray
12.   // 组件内定义style
13.   @Styles setBg (){
14.     .backgroundColor(this.bgColor)
15.     .onClick(()=>{
16.       this.bgColor = Color.Green
17.     })
18. }
20.   build() {
21.     Column({space:20}){
22.       Text('@Styles').commonStyles().setBg().fontColor(Color.White)
23.       Text().commonStyles().setBg()
24.       Text().commonStyles().borderRadius(50).setBg()
25.     }.width('100%').justifyContent(FlexAlign.Center)
26.   }
27. }

复制代码

@Builder：自定义构建函数（结构，样式，事件）【偏重结构】

全局定义的函数在使用时不消写this,组件内定义的在使用时要写this

1. // 全局定义
2. @Builder
3. function navItem (icon:ResourceStr,txt:string){
4.   Column({space:10}){
5.     Image(icon).width(70).height(70)
6.     Text(txt)
7.   }.onClick(()=>{
8.     AlertDialog.show({
9.       message:'这里是' + txt
10.     })
11.   })
12. }
13. @Entry
14. @Component
15. struct BuilderPage {
16.   // 组件内定义
17.   @Builder
18.   navItem (icon:ResourceStr,txt:string){
19.     Column({space:10}){
20.       Image(icon).width(70).height(70)
21.       Text(txt)
22.     }.onClick(()=>{
23.       AlertDialog.show({
24.         message:'这里是' + txt + '  @Builder'
25.       })
26.     })
27. }
28.   build() {
29.     Row({space:20})
30.     {
31.       navItem($r('app.media.yaodiao'),'阿里药店')
32.       navItem($r('app.media.paimai'),'阿里拍卖')
33.       this.navItem($r('app.media.nongchang'),'阿里农场')
34.       this.navItem($r('app.media.yizhan'),'菜鸟驿站')
35.     }.width('100%').justifyContent(FlexAlign.Center)
36.   }
37. }

复制代码

滚动容器Scroll

核心用法

1. @Entry
2. @Component
3. struct ScrollPage {
4.   build() {
5.     Scroll(){
6.       Column({space:10}){
7.         ForEach(Array.from({length:10}),(item:string,index)=>{
8.           Text(`测试文本${index + 1}`)
9.             .width('100%').height(50)
10.             .fontColor(Color.White)
11.             .backgroundColor(Color.Orange)
12.             .textAlign(TextAlign.Center)
13.         })
14.       }.width('100%').padding(10)
15.     }.width('100%').height(400)
17.   }
18. }

复制代码

常见属性

1. @Entry
2. @Component
3. struct ScrollPage {
4.   build() {
5.     Scroll(){
6.       Column({space:10}){
7.         ForEach(Array.from({length:10}),(item:string,index)=>{
8.           Text(`测试文本${index + 1}`)
9.             .width('100%').height(50)
10.             .fontColor(Color.White)
11.             .backgroundColor(Color.Orange)
12.             .textAlign(TextAlign.Center)
13.         })
14.       }
15.       .width('100%').padding(10)
17.     }
18.     .width('100%').height(400)
19.     .scrollable(ScrollDirection.Vertical) // 滚动方向
20.     .scrollBar(BarState.Auto) // On 一直显示，Off一直隐藏 Auto滑动显示
21.     .scrollBarWidth(5) // 滚动条宽度
22.     .edgeEffect(EdgeEffect.Spring) // 滑动效果
23.     .scrollBarColor(Color.Green)
25.   }
26. }

复制代码

控制器

1. @Entry
2. @Component
3. struct ScrollPage {
4.   // 1.创建Scroll 对象（实例化）
5.   myScroll:Scroller = new Scroller()
7.   build() {
8.     Column(){
9.       // 2.绑定给Scroll组件
10.       Scroll(this.myScroll){
11.         Column({space:10}){
12.           ForEach(Array.from({length:10}),(item:string,index)=>{
13.             Text(`测试文本${index + 1}`)
14.               .width('100%').height(50)
15.               .fontColor(Color.White)
16.               .backgroundColor(Color.Orange)
17.               .textAlign(TextAlign.Center)
18.           })
19.         }
20.         .width('100%').padding(10)
22.       }
23.       .width('100%').height(400).margin({bottom:50})
24.       .scrollable(ScrollDirection.Vertical) // 滚动方向
25.       .scrollBar(BarState.Auto) // On 一直显示，Off一直隐藏 Auto滑动显示
26.       .scrollBarWidth(5) // 滚动条宽度
27.       .edgeEffect(EdgeEffect.Spring) // 滑动效果
28.       .scrollBarColor(Color.Green)
30.       Button('回到顶部/底部')
31.         .onClick(()=>{
32.           this.myScroll.scrollEdge(Edge.Bottom)  // Edge.Top Edge.Start回到顶部
33.         })
35.       Button('获取滚动位置').margin(20)
36.         .onClick(()=>{
37.           const y = this.myScroll.currentOffset().yOffset
38.           AlertDialog.show({
39.             message:`y:${y}`
40.           })
41.         })
43.     }
46.   }
47. }

复制代码

事件

返回顶部案例

1. @Entry
2. @Component
3. struct ScrollPage {
4.   // 1.创建Scroll 对象（实例化）
5.   myScroll:Scroller = new Scroller()
7.   // 距离顶部位置
8.   @State scrollTop:number = 0
9.   build() {
10.   //   淘宝滚动案例
11.     Column(){
12.       Scroll(this.myScroll){
13.         Column(){
14.           Image($r('app.media.t_b'))
15.         }
16.       }.width('100%')
17.       .height('100%')
18.       .onScroll((x,y)=>{
19.         this.scrollTop = this.myScroll.currentOffset().yOffset
20.         // console.log('x,y',x,y,this.scrollTop)
21.       })
23.       if( this.scrollTop >= 200){
24.         Row(){
25.           Image($r("app.media.rocket")) .width(50)
26.         }
27.         .position({bottom:30,right:20})
28.         .backgroundColor(Color.White)
29.         .borderRadius(25)
30.         .onClick(()=>{
31.           this.myScroll.scrollEdge(Edge.Top)
32.         })
33.       }
36.     }
37.   }
38. }

复制代码

列表组件list

字体图标

容器组件Tabs

基本用法

1. @Entry
2. @Component
3. struct TabsPage {
4.   build() {
5.     Tabs(){
6.       TabContent(){ // 有且只能有一个子组件
7.         Text('首页内容')
8.       }
9.       .tabBar('首页') // 配置导航  也可以不配
11.       TabContent(){ // 有且只能有一个子组件
12.         Text('推荐内容')
13.       }
14.       .tabBar('推荐')
16.       TabContent(){ // 有且只能有一个子组件
17.         Text('我的内容')
18.       }
19.       .tabBar('我的')
20.       
21.     }
22.   }
23. }

复制代码

常用属性

滚动导航栏

1. @Entry
2. @Component
3. struct TabsPage {
4.   @State titles:string[] = [
5.     '首页','关注','热门','军事','体育',
6.   '八卦','数码','财经','美食','旅行'
7.   ]
8.   build() {
10.     Tabs(){
11.       ForEach(this.titles,(item:string,index)=>{
12.           TabContent(){ // 有且只能有一个子组件
13.             Text(`${item}内容`)
14.           }
15.           .tabBar(item) // 配置导航  也可以不配
16.       })
18.     }
19.     .barMode(BarMode.Scrollable)
20.   }
21. }

复制代码

自定义TaBar

切换高亮

1. interface Item{
2.   title:string,
3.   icon:ResourceStr
4. }
5. @Entry
6. @Component
7. struct TabsPage {
8.   @State tabList:Item[] = [
9.     {
10.       title:'首页',
11.       icon:$r('app.media.home')
12.     },
13.     {
14.       title:'推荐',
15.       icon: $r('app.media.tuijian')
16.     },
17.     {
18.       title:'新增',
19.       icon:$r('app.media.add')
20.     },
21.     {
22.       title:'我的',
23.       icon:$r('app.media.my')
24.     },
25.   ]
27.   // 选择tab
28.   @State selectTabIndex:number = 0
29.   // 构建tab
30.   @Builder
31.   myTabBuilder(itemIndex:number,icon:ResourceStr,title:string){
32.     Column({space:8}){
33.       Image(icon).width(30).fillColor(`${this.selectTabIndex == itemIndex ? Color.Orange:Color.Black}`)
34.       Text(title).fontColor(`${this.selectTabIndex == itemIndex ? Color.Orange:Color.Black}`)
35.     }
36.   }
39.   build() {
41.     // 切换高亮
42.     Tabs({barPosition:BarPosition.End}){
43.       ForEach(this.tabList,(item:Item,index)=>{
44.           TabContent(){ // 有且只能有一个子组件
45.             Text(`${item.title}内容`)
46.           }
47.           .tabBar(this.myTabBuilder(index,item.icon,item.title)) // 配置导航  也可以不配
48.       })
50.     }.onChange((index)=>{
51.       this.selectTabIndex = index
52.     })
55.   }
56. }

复制代码

案例：小米有品底部Tabs

1. interface Item{
2.   title:string,
3.   icon:ResourceStr
4. }
5. @Entry
6. @Component
7. struct TabsPage {
8.   @State tabList:Item[] = [
9.     {
10.       title:'首页',
11.       icon:$r('app.media.home')
12.     },
13.     {
14.       title:'推荐',
15.       icon: $r('app.media.tuijian')
16.     },
17.     {
18.       title:'推买',
19.       icon: $r('app.media.yizhan')
20.     },
21.     {
22.       title:'新增',
23.       icon:$r('app.media.add')
24.     },
25.     {
26.       title:'我的',
27.       icon:$r('app.media.my')
28.     },
29.   ]
31.   // 选择tab
32.   @State selectTabIndex:number = 0
34.   // 构建tab
35.   @Builder
36.   myTabBuilder(itemIndex:number,icon:ResourceStr,title:string){
37.     Column({space:8}){
38.       Image(icon).width(28).fillColor(`${this.selectTabIndex == itemIndex ? Color.Orange:Color.Black}`)
39.       Text(title).fontColor(`${this.selectTabIndex == itemIndex ? Color.Orange:Color.Black}`)
40.     }
41.   }
43.   // 构建中间的tab
44.   @Builder
45.   centerTabBuilder(icon:ResourceStr){
46.     Image(icon).width(50)
47.   }
50.   build() {
51.     // 切换高亮
52.     Tabs({barPosition:BarPosition.End}){
53.       ForEach(this.tabList,(item:Item,index)=>{
54.         if(index == 2){
55.           TabContent(){ // 有且只能有一个子组件
56.             Text(`${item.title}内容`)
57.           }
58.           .tabBar(this.centerTabBuilder(item.icon))
59.         }else {
60.           TabContent(){ // 有且只能有一个子组件
61.             Text(`${item.title}内容`)
62.           }
63.           .tabBar(this.myTabBuilder(index,item.icon,item.title)) // 配置导航  也可以不配
64.         }
66.       })
68.     }.onChange((index)=>{
69.       this.selectTabIndex = index
70.     })
73.   }
74. }

复制代码

Class类

Class类 实例属性

1. // 实例对象
2. class Cat{
3.   name:string = '小十'
4.   food?:string
5. }
6. let catObj = new Cat()
7. catObj.food = '鸡肉猫条'
8. console.log('名字：',catObj.name)
9. console.log('食物：',catObj.food)
11. @Entry
12. @Component
13. struct classPage {
14.   build(){}
15. }

复制代码

Class类 构造函数

差别的实例，未来需要有差别的字段初始值，就需要通过构造函数实现

[code]// ---------------------构造函数---------------------
interface  CatObj{
  food:string
  age:number
}
class Cat{
  name:string = '小十'
  food?:string
  age?:number

  constructor(paramsObj:CatObj) {
    // this.name = name
    this.food = paramsObj.food
    this.age = paramsObj.age
  }
}
let catDay1 = new Cat({food:'鸡肉猫条',age:90})
console.log(`第 ${catDay1.age} 天吃{catDay1.food}`)
let catDay2 = new Cat({food:'金枪