HarmonyOS NEXT Cangjie Development Language Practical Case: Fitness App

Hello everyone, today I’m sharing the homepage of a fitness app:

This page seems slightly more complex than the previous cases, mainly in the top part, where there are overlapping backgrounds and offset parts. Overlapping layouts can be implemented using the Stack container, and offsets beyond the container’s scope can be achieved using negative spacing. The specific implementation code for the top part is as follows:

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)

The remaining part is a scrolling List with a title, so it is implemented using the List container. Regarding the use of the list title, everyone should be more familiar with it:

@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')})){
}

It should be noted that the first row of the list is a list that can be scrolled horizontally. Here, I choose to use the Scroll container:

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)

The last part is relatively simple and similar to the code above, so it won’t be elaborated on further.
That’s all for today’s content. Thank you for reading.