HarmonyOS-ArkTS-UIAbility——【坚果派-红目香薰】

红目香薰

发布于 2024-01-25 08:24:58

3380

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

应用程序入口—UIAbility

什么是UIAbility

UIAbility也就是与用户进行交互的一种说法，UI也就是外观样式，Ability也就是能力的意思，外观功能，或者说是页面功能。

应用页面的交互方式

1、在桌面进入

可以在桌面直接点击应用进入。

2、应用呼叫拉起另外一个应用

通过应用中的link连接或者其他功能呼叫拉起另外一个应用，或说成跳转到另外一个应用。

或例如图片分享打开其它应用。

这个就像支付页面一样，当点击支付的时候直接环境支付宝或者微信登支付软件，就可以直接传递参数过去进行付费操作。

3、最近应用列表

点击最近应用按钮就能看到我们刚才所打开的各类应用，点击即可打开。

UIAbility内的页面创建

初始的项目中会在【entry/src/main/ets/entryability/】会生成一个EntryAbility.ts文件，在对应的pages下面会有一个index.ets文件。

这就是基于UIAbility实现的应用入口页面。

我们可以在index中根据用户的需求来完成具体样式设计。

示例1、本页面内容处理

本页面中添加了个按钮，当点击按钮后修改了一下默认的message内容。

测试代码

@Entry
@Component
struct Index {
  @State message: string = 'Index Page 测试'

  build() {
    Row() {
      Column() { //行信息
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        //添加一个按钮，并且给与按钮点击事件
        Button('Next').onClick(() => {
          this.message="我更改了测试文字"
        }).fontSize(50)

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

示例2、页面跳转与参数传递(需要使用路由)

我们先在pages钟在创建一个page用于跳转使用。

随便给个名称，当然类名的首字母需要大写。

在index页面中添加代码

import router from '@ohos.router';

let msg: string = "Index 页面过来的数据。";

@Entry
@Component
struct Index {
  @State message: string = 'Index Page 测试'

  build() {
    Row() {
      Column() { //行信息
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Blank()
        //添加一个按钮，并且给与按钮点击事件
        Button('Next').onClick(() => {
          this.message = "我更改了测试文字"
        }).fontSize(50).width('100%').height('120')
        Blank()
        //添加一个页面跳转的按钮
        Button('跳转到MyETS页面').onClick(() => {
          router.pushUrl({
            url: "pages/MyETS",
            params:{
              msg_info:msg
            }
          })
        }).fontSize(50).width('100%').height('120')
      }
      .width('100%').height('320')
    }
    .height('100%').backgroundColor('pink')
  }
}

样式效果：

承接数据代码

import router from '@ohos.router';

@Entry
@Component
struct MyETS {
  @State message: string = 'Hello World MyETS'
  @State msg_info: string = router.getParams()?.['msg_info']

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.msg_info).fontColor(Color.Red).fontSize(50)
      }
      .width('100%')
    }
    .height('100%')
  }
}

实现效果：

跳转过来后可以看到传递过来的数据。

路由模块

import router from '@ohos.router';

这句话代码这个类引用了路由，我们可以根据router来调用对应的路径已经传递的参数内容。

路由的返回上一层一面功能示例

我们来修改一个刚才的MyETS页面，页面代码如下：

import router from '@ohos.router';

@Entry
@Component
struct MyETS {
  @State message: string = 'Hello World MyETS'
  @State msg_info: string = router.getParams()?.['msg_info']

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.msg_info).fontColor(Color.Red).fontSize(50)

        Button('返回到Index页面').onClick((event: ClickEvent) => {
          router.back()
        }).fontSize(25).width('100%').height(150)
      }
      .width('100%')
    }
    .height('100%')
  }
}

页面效果与返回效果：