DEV Community

wei chang
wei chang

Posted on • Edited 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:

Before we start writing the code, let’s first sort out the structure of the entire page. It is a scrolling List as a whole, so we need to use the List component. Moreover, this page does not have a Navigation bar. However, to better use component navigation, we still need to use the navigation component and hide the header content, like this:

pathStack: NavPathStack = new NavPathStack();

Navigation(this.pathStack){
}
.width('100%')
.height('100%')
.hideTitleBar(true)
Enter fullscreen mode Exit fullscreen mode

Next, within the List container, it is further divided into several different sections, namely the personal information section, the function list section, and the recommendation section. Each section has a different layout. We can first set the overall style of the List component, which has a background color and left and right spacing. Additionally, the top and bottom spacing of the elements within the List can be achieved using the space parameter, eliminating the hassle of setting margin each time. The specific code is as follows:

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)