当前位置：首页 > news >正文

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

news 来源：原创 2025/6/30 7:45:03

各位好，今日分享一个健身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语言##仓颉##休闲娱乐#