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

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