鸿蒙harmonyos实战-kb88凯时官网登录

来自:
时间:2024-04-13
阅读:
免费资源网,https://freexyz.cn/

一、路由导航

路由导航是指在应用程序中通过路径导航定位到特定页面的过程。路由导航的实现通常采用路由器(router)来进行管理,路由器根据路径的不同值将用户请求导向到不同的页面。

在harmonyos中路由导航主要有:页面跳转、页面返回和页面返回前增加一个询问框

1.编程路由

1.1 页面跳转

页面跳转相关作用:

<a href=https://www.freexyz.cn/tag/harmonyos.html target=_blank class=infotextkey>鸿蒙</a><a href=https://www.freexyz.cn/tag/harmonyos.html target=_blank class=infotextkey>harmonyos</a>实战-arkui组件(页面路由)

router模块提供了两种跳转模式: router.push 和 router.replace。router.push 可以通过返回键或者调用router.back()方法返回到当前页:

鸿蒙harmonyos实战-arkui组件(页面路由)

router模块提供了两种实例模式: standard 和 single:

鸿蒙harmonyos实战-arkui组件(页面路由)

☀️1.1.1 保留d88尊龙官网手机app主页在页面栈中,以便返回时恢复状态

d88尊龙官网手机app主页(home)和 详情页(detail)

1、d88尊龙官网手机app主页

import router from '@ohos.router';
// 在home页面中
function onjumpclick(): void {
  router.push => {
    if (err) {
      console.error(`invoke pushurl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('invoke pushurl succeeded.');
  });
}
@entry
@component
struct index {
  build() {
    row() {
      button('跳转到图片页面')
        .onclick(e=>{
          onjumpclick()
        })
    }.alignitems(verticalalign.center).justifycontent(flexalign.center).backgroundcolor(0xffd306).height('100%').width('100%')
  }
}

鸿蒙harmonyos实战-arkui组件(页面路由)

2、详情页

import router from '@ohos.router';
@entry //fa模式必须有这个
@component
struct index {
  @state imagewidth: number = 150
  build() {
    column() {
      row(){
        image($r('app.media.icon'))
          .width(this.imagewidth)
      }
      .width('100%')
      .height(400)
      .justifycontent(flexalign.center)
      row(){
        text($r('app.string.width_label'))
          .fontsize(20)
          .fontweight(fontweight.bold)
        textinput({text: this.imagewidth.tofixed(0)})
          .width(150)
          .backgroundcolor('#fff')
          .type(inputtype.number)
          .onchange( value => {
            this.imagewidth = parseint(value)
          })
      }
      .width('100%')
      .padding({left: 14, right: 14})
      .justifycontent(flexalign.spacebetween)
      divider()
        .width('91%')
      row(){
        button('缩小')
          .width(80)
          .fontsize(20)
          .onclick(() => {
            if(this.imagewidth >= 10){
              this.imagewidth -= 10
            }
          })
        button('放大')
          .width(80)
          .fontsize(20)
          .onclick(() => {
            if(this.imagewidth < 300){
              this.imagewidth  = 10
            }
          })
      }
      .width('100%')
      .margin({ top: 35, bottom: 35 })
      .justifycontent(flexalign.spaceevenly)
      button('回到kb88凯时d88尊龙官网手机app官网登录首页')
        .width(160)
        .fontsize(20)
        .onclick(() => {
          router.back()
        })
      slider({
        min: 100,
        max: 300,
        value: this.imagewidth,
        step: 10,
      })
        .width('100%')
        .blockcolor('#36d')
        .trackthickness(5)
        .showtips(true)
        .onchange(value => {
          this.imagewidth = value
        })
    }
    .width('100%')
    .height('100%')
  }
}

鸿蒙harmonyos实战-arkui组件(页面路由)

☀️1.1.2 不保留d88尊龙官网手机app主页在页面栈中,在返回时直接退出应用

登录页(login)和 个人中心页(profile)的切换适用案例

1、登录页

function onjumpclick(): void {
  router.replace => {
    if (err) {
      console.error(`invoke replaceurl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('invoke replaceurl succeeded.');
  })
}
☀️1.1.3 保留d88尊龙官网手机app主页在页面栈中,以便返回时恢复状态

设置页(setting)和一个主题切换页

1、设置页

// 在setting页面中
function onjumpclick(): void {
  router.push => {
    if (err) {
      console.error(`invoke pushurl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('invoke pushurl succeeded.');
  });
}
☀️1.1.4 保留d88尊龙官网手机app主页在页面栈中,以便返回时恢复状态

搜索结果列表页(searchresult)和一个搜索结果详情页(searchdetail)

1、搜索结果列表页

// 在searchresult页面中
function onjumpclick(): void {
  router.replace => {
    if (err) {
      console.error(`invoke replaceurl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('invoke replaceurl succeeded.');})
}

1.2 页面参数

☀️1.2.1 d88尊龙官网手机app主页页面参数传递和获取

1、参数传递

class datamodelinfo {
  age: number;
}
class datamodel {
  id: number;
  info: datamodelinfo;
}
function onjumpclick(): void {
  // 在home页面中
  let paramsinfo: datamodel = {
    id: 123,
    info: {
      age: 20
    }
  };
  router.push => {
    if (err) {
      console.error(`invoke pushurl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('invoke pushurl succeeded.');
  })
}

2、参数获取

const params = router.getparams(); // 获取传递过来的参数对象
const id = params['id']; // 获取id属性的值
const age = params['info'].age; // 获取age属性的值
☀️1.2.1 返回页页面参数传递和获取

鸿蒙harmonyos实战-arkui组件(页面路由)

1、参数传递

router.back({
  url: 'pages/home',
  params: {
    info: '来自home页'
  }
});

2、参数获取

onpageshow() {
  const params = router.getparams(); // 获取传递过来的参数对象
  const info = params['info']; // 获取info属性的值
}

?1.3 页面返回前增加一个询问框

鸿蒙harmonyos实战-arkui组件(页面路由)

☀️1.3.1 默认询问框
import router from '@ohos.router';
function onjumpclick(): void {
  router.push => {
    if (err) {
      console.error(`invoke replaceurl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('invoke replaceurl succeeded.');
  })
}
@entry
@component
struct index {
  build() {
    row() {
      button('跳转到图片页面')
        .onclick(e=>{
          onjumpclick()
        })
    }.alignitems(verticalalign.center).justifycontent(flexalign.center).backgroundcolor(0xffd306).height('100%').width('100%')
  }
}

鸿蒙harmonyos实战-arkui组件(页面路由)

☀️1.3.2 自定义询问框
import router from '@ohos.router';
import promptaction from '@ohos.promptaction';
function onbackclick() {
  // 弹出自定义的询问框
  promptaction.showdialog({
    message: '您还没有完成支付,确定要返回吗?',
    buttons: [
      {
        text: '取消',
        color: '#ff0000'
      },
      {
        text: '确认',
        color: '#0099ff'
      }
    ]
  }).then((result) => {
    if (result.index === 0) {
      // 用户点击了“取消”按钮
      console.info('user canceled the operation.');
    } else if (result.index === 1) {
      // 用户点击了“确认”按钮
      console.info('user confirmed the operation.');
      // 调用router.back()方法,返回上一个页面
      router.back();
    }
  }).catch((err) => {
    console.error(`invoke showdialog failed, code is ${err.code}, message is ${err.message}`);
  })
}
@entry
@component
struct index {
  @state imagewidth: number = 150
  build() {
    column() {
      row(){
        image($r('app.media.icon'))
          .width(this.imagewidth)
      }
      .width('100%')
      .height(400)
      .justifycontent(flexalign.center)
      row(){
        text($r('app.string.width_label'))
          .fontsize(20)
          .fontweight(fontweight.bold)
        textinput({text: this.imagewidth.tofixed(0)})
          .width(150)
          .backgroundcolor('#fff')
          .type(inputtype.number)
          .onchange( value => {
            this.imagewidth = parseint(value)
          })
      }
      .width('100%')
      .padding({left: 14, right: 14})
      .justifycontent(flexalign.spacebetween)
      divider()
        .width('91%')
      row(){
        button('缩小')
          .width(80)
          .fontsize(20)
          .onclick(() => {
            if(this.imagewidth >= 10){
              this.imagewidth -= 10
            }
          })
        button('放大')
          .width(80)
          .fontsize(20)
          .onclick(() => {
            if(this.imagewidth < 300){
              this.imagewidth  = 10
            }
          })
      }
      .width('100%')
      .margin({ top: 35, bottom: 35 })
      .justifycontent(flexalign.spaceevenly)
      button('回到kb88凯时d88尊龙官网手机app官网登录首页')
        .width(160)
        .fontsize(20)
        .onclick(() => {
          onbackclick()
        })
      slider({
        min: 100,
        max: 300,
        value: this.imagewidth,
        step: 10,
      })
        .width('100%')
        .blockcolor('#36d')
        .trackthickness(5)
        .showtips(true)
        .onchange(value => {
          this.imagewidth = value
        })
    }
    .width('100%')
    .height('100%')
  }
}

鸿蒙harmonyos实战-arkui组件(页面路由)

免费资源网,https://freexyz.cn/
返回顶部
顶部
网站地图