HarmonyOS NEXT仓颉开发语言实战案例：健身App

各位好，今日分享一个健身app的首页：

这个页面看起比之前的案例要稍微复杂一些，主要在于顶部部分，有重叠的背景，还有偏移的部分。重叠布局可以使用Stack容器实现，超出容器范围的偏移可以使用负数间距来实现，顶部部分的具体实现代码如下：

1. Column{
2.     Text('February')
3.     .fontColor(Color.WHITE)
4.     .fontSize(14)
5.    
6.     Row{
7.         Row{
8.             Image(@r(app.media.goal))
9.             .width(37)
10.             .height(37)
11.             Text('MY GOAL')
12.             .fontColor(Color.WHITE)
13.             .fontSize(30)
14.             .fontWeight(FontWeight.Bolder)
15.             .margin(left:6)
16.         }
17.         
18.         Image(@r(app.media.cm_add))
19.         .width(28)
20.         .height(28)
21.         
22.     }
23.     .margin(top:20)
24.     .width(100.percent)
25.     .justifyContent(FlexAlign.SpaceBetween)
26.     .alignItems(VerticalAlign.Center)
27. }
28. .alignItems(HorizontalAlign.Start)
29. .padding(left:12,right:12,top:60)
30. .width(100.percent)
31. .height(220)
32. .linearGradient( direction: GradientDirection.Bottom, colors:[(Color(103, 76, 222, alpha: 1.0),0.0),(Color(129, 28, 219, alpha: 1.0),1.0)], repeating: false)
33. .borderRadius(bottomLeft: 20.vp, bottomRight: 20.vp)
34. Row{
35.     Column(5){
36.         Row(6){
37.             Text('weight')
38.             .fontColor(Color.GRAY)
39.             .fontSize(11)
40.             Image(@r(app.media.cm_down))
41.             .width(15)
42.             .height(15)
43.         }
44.         .justifyContent(FlexAlign.Center)
45.         .alignItems(VerticalAlign.Center)
46.         .width(80)
47.         .height(20)
48.         .borderRadius(10)
49.         .border(width: 1.vp, color: Color(216, 216, 216, alpha: 1.0), radius:10.vp,style: BorderStyle.Solid)
50.         Row(8){
51.             Image(@r(app.media.cm_js))
52.             .width(28)
53.             .height(28)
54.             Column(5){
55.                   Progress(value: 50.0, total: 100.0, `type`: ProgressType.Linear)
56.                     .width(100.percent)
57.                     .color(0x9570FF)
58.                 Row{
59.                     Text('250 lb')
60.                     .fontColor(Color.GRAY)
61.                     .fontSize(10)
62.                     Text('250 lb')
63.                     .fontColor(Color.GRAY)
64.                     .fontSize(10)
65.                 }
66.                 .width(100.percent)
67.                 .alignItems(VerticalAlign.Center)
68.                 .justifyContent(FlexAlign.SpaceBetween)
69.             }
70.             .layoutWeight(1)
71.         }
72.         .width(100.percent)
73.     }
74.     .justifyContent(FlexAlign.Center)
75.     .alignItems(HorizontalAlign.Start)
76.     .padding(10)
77.     .width(100.percent)
78.     .height(80)
79.     .borderRadius(10)
80.     .backgroundColor(Color.WHITE)
81. }
82. .width(100.percent)
83. .height(80)
84. .margin(top:-50)
85. .padding(left:12,right:12)

复制代码

剩余的部分是滚动的列表，而且有标题，所以使用List容器来实现，关于List标题的使用大家要多多熟悉：

1. @Builder func itemHead(text:String) {
2.     Row{
3.         Text(text)
4.         .fontColor(Color.GRAY)
5.         .fontSize(13)
6.     }
7.     .width(100.percent)
8.     .height(35)
9.     .alignItems(VerticalAlign.Center)
10.     .padding(top:3,left:10)
11. }
12. ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('THIS WEEK')})){
13. }

复制代码

需要注意的是，列表的第一行是可以横向滚动的列表，我这里选择使用Scroll容器：

1. Scroll{
2.     Row(12){
3.         Stack(Alignment.Bottom){
4.             Image(@r(app.media.cm_s1))
5.             .width(124)
6.             .height(155)
7.             Column(3){
8.                 Text('WALKING LUNGES')
9.                 .fontColor(Color.WHITE)
10.                 .fontSize(13)
11.                 .fontWeight(FontWeight.Bold)
12.                 Text('Today')
13.                 .fontSize(10)
14.                 .fontColor(Color.WHITE)
15.                 .backgroundColor(0x3EC7E6)
16.                 .height(16)
17.                 .width(68)
18.                 .borderRadius(8)
19.                 .textAlign(TextAlign.Center)
20.             }
21.             .alignItems(HorizontalAlign.Start)
22.             .margin(bottom:8)
23.         }
24.         Stack(Alignment.Bottom){
25.             Image(@r(app.media.cm_s2))
26.             .width(124)
27.             .height(155)
28.             Column(3){
29.                 Text('WALKING LUNGES')
30.                 .fontColor(Color.WHITE)
31.                 .fontSize(13)
32.                 .fontWeight(FontWeight.Bold)
33.                 Text('Today')
34.                 .fontSize(10)
35.                 .fontColor(Color.WHITE)
36.                 .backgroundColor(0x3EC7E6)
37.                 .height(16)
38.                 .width(68)
39.                 .borderRadius(8)
40.                 .textAlign(TextAlign.Center)
41.             }
42.             .alignItems(HorizontalAlign.Start)
43.             .margin(bottom:8)
44.         }
45.         Stack(Alignment.Bottom){
46.             Image(@r(app.media.cm_s3))
47.             .width(124)
48.             .height(155)
49.             Column(3){
50.                 Text('WALKING LUNGES')
51.                 .fontColor(Color.WHITE)
52.                 .fontSize(13)
53.                 .fontWeight(FontWeight.Bold)
54.                 Text('Today')
55.                 .fontSize(10)
56.                 .fontColor(Color.WHITE)
57.                 .backgroundColor(0x3EC7E6)
58.                 .height(16)
59.                 .width(68)
60.                 .borderRadius(8)
61.                 .textAlign(TextAlign.Center)
62.             }
63.             .alignItems(HorizontalAlign.Start)
64.             .margin(bottom:8)
65.         }
66.     }
67.     .padding(left:12,right:12)
68. }
69. .height(155)
70. .width(100.percent)

复制代码

最后一部分比较简单，和上面代码类似，就不再赘述了。
今天的内容就是这样，感谢阅读。##HarmonyOS语言##仓颉##休闲娱乐#

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除