Skip to content

Build the Second Page

Create the Second Page

  1. Right click entry > ets > pages folder, select New and choose Page.
  1. Type 'SecondPage' as the new Page name.

SecondPage created.

Navigate to entry > resources > base > profile, open main_pages.json you will find the page routes was configured automatically. 

// main_pages.json
{
  "src": [
    "pages/Index",
    "pages/SecondPage"
  ]
}

Note

If you create the page in other methods, you have to manually configure the page routes in above path.

Add Text and Button Components

Add Text and Button components with styled properties, using the first page as a reference. The sample code in Second.ets is shown below: 

// SecondPage.ets
@Entry
@Component
struct SecondPage {
  @State message: string = 'Second Page';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}
You can observe how the second page looks like in the Previewer