DEV Community

wei chang
wei chang

Posted on

Practical Case of HarmonyOS NEXT Cangjie Development Language: A Small but Beautiful Travel App

Hello everyone, weekend! This article shares the home page of a small but beautiful travel app. The effect picture is as follows:

Image description

Obviously, this page still uses the List container. There are uniform margins on both sides of the page. We can set them uniformly in the List container:

List(space:20){
}
.padding(left:14,right:14,top:62)
.width(100.percent)
.height(100.percent)
.backgroundColor(0xF6F9FF)
Enter fullscreen mode Exit fullscreen mode

The personal information section in the first row of the list is relatively simple. It is laid out horizontally and aligned at both ends. The specific code is as follows:

Row{
    Column(4){
        Text('llona')
        .fontSize(17)
        .fontColor(0x42436A)
        Text('Summer time, let's book a flight for vacation')
        .fontColor(0x8D91A2)
        .fontSize(14)
    }
    .constraintSize( maxWidth: 60.percent)
    .alignItems(HorizontalAlign.Start)
    Image(@r(app.media.lx_icon))
    .width(55)
    .height(55)
}
.width(100.percent)
.justifyContent(FlexAlign.SpaceBetween)
Enter fullscreen mode Exit fullscreen mode

The second line has the same alignment at both ends, and the content is simpler:

Row{
    Row{
        Image(@r(app.media.lx_cup))
        .height(21)
        .width(21)
        .margin(left:14)
        Text('1130 pts')
        .fontColor(0X42436A)
        .fontSize(15)
        .margin(left:14)
    }
    .width(168)
    .height(49)
    .backgroundColor(Color.WHITE)
    .alignItems(VerticalAlign.Center)
    .borderRadius(4)
    Row{
        Image(@r(app.media.lx_wallet))
        .height(21)
        .width(21)
        .margin(left:14)
        Text('$ 4600')
        .fontColor(0X42436A)
        .fontSize(15)
        .margin(left:14)
    }
    .width(168)
    .height(49)
    .backgroundColor(Color.WHITE)
    .alignItems(VerticalAlign.Center)
    .borderRadius(4)
}
.width(100.percent)
.justifyContent(FlexAlign.SpaceBetween)
Enter fullscreen mode Exit fullscreen mode

The function List part is a bit difficult. We need to nest the Grid list, that is, Grid, in the list container. This is a grid with 2 rows and 4 columns. Please pay attention to the setting of the grid property and the use of foreach:

Grid {
    ForEach(lxList, itemGeneratorFunc: {item:LXItem,tag:Int64 =>
                GridItem{
                    Column{
                    Image(item.getImg())
                    .width(52)
                    .height(52)
                    Text(item.getTitle())
                    .fontColor(0x6e6e6e)
                    .fontSize(15)
                    }
                    .height(80)
                }
            })
}
.width(100.percent)
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(12)
.rowsGap(12)
.height(200)
Enter fullscreen mode Exit fullscreen mode

The last Column has a title. We have seen it many times. There are various implementation methods for this alignment of three elements. Today, we will simply and practically implement Row and Column:

ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('Recommend')})){
    ListItem{
        Row(15){
            Image(@r(app.media.lx_f1))
            .width(142)
            .height(185)

            Column{
                Image(@r(app.media.lx_f2))
                .width(100.percent)
                .height(83)
                Image(@r(app.media.lx_f3))
                .width(100.percent)
                .height(83)

            }
            .height(185)
            .layoutWeight(1)
            .justifyContent(FlexAlign.SpaceBetween)

        }
        .width(100.percent)
        .height(185)
    }
}
Enter fullscreen mode Exit fullscreen mode

The main contents of the travel app are these. Thank you for reading.

Top comments (0)