各位好，今日分享一個健身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語言##倉頡##休閑娛樂#
