40.HarmonyOS鸿蒙系统 App(ArkUI)实现页面跳转与返回

1.新建项目,默认创建inext.ets界面。

2.右键page添加第二个页面,设置page2,点击finish

设置按钮触发事件:

page2.ets按钮触发事件

index.ets

复制代码
import FaultLogger from '@ohos.faultLogger'
import promt2 from '@ohos.prompt'
import promt_action from '@ohos.promptAction'
import router from '@ohos.router';
@Entry
@Component
struct Index {
  private arr_value:string[] = ['AP1','AP2','AP3','AP4','AP5','AP6','AP7','AP8'];
  @State message: string = '调试'
  @State message2: string = '测试'
  @State message3: string = 'demo by txwtech'
  @State handlePopup2:boolean = false

 //堆叠布局示范,堆叠布局放两个弹性布局
  build() {
   // Stack({}){
   //   Column(){}.width('80%').height('70%').backgroundColor(Color.Blue)//线性布局在底层
   //   Text('堆叠布局').width('99%').height(100).margin({top:5}).backgroundColor(Color.Yellow) //text在中层
   //   Button('按钮').width('80%').height(100).margin({top:50})//按钮在最上层
   // }
    //线性布局结合弹性布局
    //使用弹性布局,可以实现子组件沿水平方向排列,两端对齐,子组件间距平分,竖直方向上子组件居中的效果
    Column(){
      Column({space:5}){
        Text('').height(30)
        Text('页面跳转demo').backgroundColor(Color.Green).fontColor(Color.White).fontSize(30).width('100%').textAlign(TextAlign.Center)
        Text('').height(30)
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Text('文本1').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本2').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本3').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Text('文本4').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本5').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本6').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Text('文本7').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本8').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本9').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }
        Text('').height(30)
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Button('按钮1').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Button('按钮2').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Button('按钮3').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Button('按钮4').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Button('按钮5').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Button('按钮6').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }

        Button('下一页').width('100%')
        .height(80)
        .fontSize(50)
        .fontColor(Color.White)
          .onClick(()=>{
            router.pushUrl({url:'pages/Page2'}).then(()=>{
              console.info('login to next page')
            }).catch((err)=>{
              console.info('catched error is ${err.code}, message is ${err.message}' )
            })
          })
          .stateStyles({
            pressed:{.backgroundColor(Color.Green)}, //按下背景颜色改变
            normal:{.backgroundColor(Color.Blue)}
          })



      }
    }





  }
}

page2.ets

复制代码
import router from '@ohos.router'
@Entry
@Component
struct Page2 {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text('这是第二页')
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(50)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('返回').onClick(()=>{
          try {
           router.back()
            console.info('return is ok')
          } catch (err){
            console.info('this is err',err.message)
          }

          })
          .width('100%')
          .fontSize(50)

      }
      .width('100%')
    }
    .height('100%')
  }
}
相关推荐
爱笑的眼睛118 小时前
我的HarmonyOS百宝箱
华为·harmonyos
2501_919749038 小时前
鸿蒙:创建公共事件、订阅公共事件和退订公共事件
华为·harmonyos
我是华为OD~HR~栗栗呀9 小时前
华为od-21届考研-C++面经
java·c语言·c++·python·华为od·华为·面试
安防视频中间件/视频资源汇聚平台10 小时前
华为结构化摄像机接入到SVMSPro平台操作流程
华为·信息可视化·实时音视频·svmspro
颜颜yan_12 小时前
HarmonyOS 6 ArkUI框架实战:文本展开折叠组件开发详解
华为·harmonyos·arkui
Industio_触觉智能13 小时前
开源鸿蒙6.1和8.1版本被确定为LTS建议版本,最新路标正式发布!-转自开源鸿蒙OpenHarmony社区
harmonyos·openharmony·开源鸿蒙
●VON15 小时前
重生之我在大学自学鸿蒙开发第五天-《实战篇》
学习·华为·云原生·harmonyos·鸿蒙
饮马长城窟15 小时前
华为Asend NPU 大模型W8A8量化调优
华为
文火冰糖的硅基工坊16 小时前
[嵌入式系统-114]:华为的操作系统:鸿蒙操作系统(HarmonyOS)和欧拉操作系统(openEuler)
科技·华为·架构·harmonyos
岸芷漫步17 小时前
鸿蒙应用中的页面跳转分析
harmonyos