HarmonyOS NEXT 仓颉开发语言实战案例：健身 App
作者：幽蓝计划
- 2025-06-29 山东
本文字数：2682 字
阅读完需：约 9 分钟
各位好，今日分享一个健身 app 的首页：
这个页面看起比之前的案例要稍微复杂一些，主要在于顶部部分，有重叠的背景，还有偏移的部分。重叠布局可以使用 Stack 容器实现，超出容器范围的偏移可以使用负数间距来实现，顶部部分的具体实现代码如下：
Column{ Text('February') .fontColor(Color.WHITE) .fontSize(14) Row{ Row{ Image(@r(app.media.goal)) .width(37) .height(37) Text('MY GOAL') .fontColor(Color.WHITE) .fontSize(30) .fontWeight(FontWeight.Bolder) .margin(left:6) } Image(@r(app.media.cm_add)) .width(28) .height(28) } .margin(top:20) .width(100.percent) .justifyContent(FlexAlign.SpaceBetween) .alignItems(VerticalAlign.Center)}.alignItems(HorizontalAlign.Start).padding(left:12,right:12,top:60).width(100.percent).height(220).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).borderRadius(bottomLeft: 20.vp, bottomRight: 20.vp)Row{ Column(5){ Row(6){ Text('weight') .fontColor(Color.GRAY) .fontSize(11) Image(@r(app.media.cm_down)) .width(15) .height(15) } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .width(80) .height(20) .borderRadius(10) .border(width: 1.vp, color: Color(216, 216, 216, alpha: 1.0), radius:10.vp,style: BorderStyle.Solid) Row(8){ Image(@r(app.media.cm_js)) .width(28) .height(28) Column(5){ Progress(value: 50.0, total: 100.0, `type`: ProgressType.Linear) .width(100.percent) .color(0x9570FF) Row{ Text('250 lb') .fontColor(Color.GRAY) .fontSize(10) Text('250 lb') .fontColor(Color.GRAY) .fontSize(10) } .width(100.percent) .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.SpaceBetween) } .layoutWeight(1) } .width(100.percent) } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Start) .padding(10) .width(100.percent) .height(80) .borderRadius(10) .backgroundColor(Color.WHITE)}.width(100.percent).height(80).margin(top:-50).padding(left:12,right:12)复制代码
剩余的部分是滚动的列表，而且有标题，所以使用 List 容器来实现，关于 List 标题的使用大家要多多熟悉：
@Builder func itemHead(text:String) { Row{ Text(text) .fontColor(Color.GRAY) .fontSize(13) } .width(100.percent) .height(35) .alignItems(VerticalAlign.Center) .padding(top:3,left:10)}ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('THIS WEEK')})){}复制代码
需要注意的是，列表的第一行是可以横向滚动的列表，我这里选择使用 Scroll 容器：
Scroll{ Row(12){ Stack(Alignment.Bottom){ Image(@r(app.media.cm_s1)) .width(124) .height(155) Column(3){ Text('WALKING LUNGES') .fontColor(Color.WHITE) .fontSize(13) .fontWeight(FontWeight.Bold) Text('Today') .fontSize(10) .fontColor(Color.WHITE) .backgroundColor(0x3EC7E6) .height(16) .width(68) .borderRadius(8) .textAlign(TextAlign.Center) } .alignItems(HorizontalAlign.Start) .margin(bottom:8) } Stack(Alignment.Bottom){ Image(@r(app.media.cm_s2)) .width(124) .height(155) Column(3){ Text('WALKING LUNGES') .fontColor(Color.WHITE) .fontSize(13) .fontWeight(FontWeight.Bold) Text('Today') .fontSize(10) .fontColor(Color.WHITE) .backgroundColor(0x3EC7E6) .height(16) .width(68) .borderRadius(8) .textAlign(TextAlign.Center) } .alignItems(HorizontalAlign.Start) .margin(bottom:8) } Stack(Alignment.Bottom){ Image(@r(app.media.cm_s3)) .width(124) .height(155) Column(3){ Text('WALKING LUNGES') .fontColor(Color.WHITE) .fontSize(13) .fontWeight(FontWeight.Bold) Text('Today') .fontSize(10) .fontColor(Color.WHITE) .backgroundColor(0x3EC7E6) .height(16) .width(68) .borderRadius(8) .textAlign(TextAlign.Center) } .alignItems(HorizontalAlign.Start) .margin(bottom:8) } } .padding(left:12,right:12)}.height(155).width(100.percent)复制代码
最后一部分比较简单，和上面代码类似，就不再赘述了。
今天的内容就是这样，感谢阅读。##HarmonyOS 语言 ##仓颉 ##休闲娱乐 #
划线
评论
复制
发布于: 刚刚阅读数: 6
幽蓝计划
关注
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论