HarmonyOS应用开发-ArkUI声明式UI页面布局、跳转与返回的实现

// @ts-nocheck

import router from '@system.router';

@Entry

@Component

struct Index {

  build() {

    Flex({direction:FlexDirection.Column,alignItems:FlexAlign.Center,justifyContent: FlexAlign.Center}){

      Image("/common/2.jpg")

        .objectFit(ImageFit.Contain)

        .height(300)

      Text('这是一个绿色苹果')

        .fontSize(26)

        .fontWeight(500)

      Button('跳转至下一页')

        .onClick(() => {

          router.push({ uri: 'pages/apple' })

        })

    }

  }

}

import router from '@system.router';

@Entry

@Component

struct Apple {

  build() {

    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      Image('/common/1.jpg')

        .objectFit(ImageFit.Contain)

        .height(300)

      Text('这是一个红苹果')

        .fontSize(26)

        .fontWeight(FontWeight.Bold)

      Button('返回')

        .onClick(() => {

          router.back()

        })

    }

    .width('100%')

    .height('100%')

  }

}