学习鸿蒙基础(8)

一、@BuilderParam装饰器
当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指@Builder方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。

@Entry
@Component
struct Page_builderParam {
  @State message: string = 'Hello World'
  title: string = ''
  @State isShow: boolean = true;

  @Builder
  left() {
    Row() {
      Button("大房子").onClick(()=>{
        this.isShow=!this.isShow
        console.log(this.isShow+"ddd")
      })
    }
  }

  @Builder
  right() {
    Row() {
      Button("好车子")
    }
  }
  
  @Builder
  list1(){
    Column(){
      ForEach(["住宅","写字楼","商铺"],item=>{
        Text(item).fontColor(Color.Green).fontSize(19)
      })
    }
  }

  build() {
    Row() {
      Column() {
        Nav({ title: "金山", left: this.left.bind(this), right: this.right })
        if(this.isShow){
          list({list1:this.list1})
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct Nav {
  title: string = ""
  @BuilderParam left: () => void
  @BuilderParam right: () => void
  build() {
    Row() {
      this.left()
      Text(this.title)
      this.right()
    }.width("100%").justifyContent(FlexAlign.SpaceBetween)
  }
}

@Component
struct list {
  title: string = ""
  @BuilderParam list1:()=>void
  build() {
    Row() {
      this.list1()
    }
    .width("100%")
    .height(89)
    .margin({ top: 10 })
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor(Color.Gray)
  }
}

二、生命周期

页面生命周期

即被@Entry装饰的组件生命周期。提供以下生命周期接口:
onPageShow: 页面每次显示时触发一次,包括路由过程、应用进入前台等场景,仅@Entry装饰的自定义组件生效。
onPageHide: 页面每次隐藏时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry装饰的自定义组件生效。
onBackPress:当用户点击返回按时触发,仅@Entry装饰的自定义组件生效。
组件生命周期

即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:
aboutToAppear: 组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
aboutToDisappear: 在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

简单举例说明:

@Entry
@Component
struct PageLife {
  @State message: string = 'Hello World'
  @State isShow: boolean = true;
  // 页面准备-可以网络请求
  aboutToAppear() {
    console.log("aboutToAppear")
  }
  // 页面显示
  onPageShow() {
    console.log("onPageShow")
  }
  // 页面离开
  onPageHide() {
    console.log("onPageHide")
  }
  // 返回按钮
  onBackPress() {
    console.log("onBackPress")
  }
  // 页面销毁
  aboutToDisappear() {
    console.log("aboutToDisappear")
  }

  build() {
    Row() {
      Column() {
        Text("爆炸现场")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        if (this.isShow) {
          Boob({isShow:$isShow})
        } else {
          Button("已爆炸")
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct Boob {
  @Link isShow:boolean
  @State count: number = 10
  timer: number = 0

  aboutToAppear() {
    this.timer=setInterval(() => {
      this.count--
      // this.isShow为false时,该组件销毁====》调用aboutToDisappear方法。
      if(this.count===0){
        this.isShow=false
      }
      console.log(this.count+"")
    }, 1000)
  }

  aboutToDisappear() {
    clearInterval(this.timer)
  }

  build() {
    Column() {
      Button("倒计时")
      Text(this.count+" S").fontSize(20)
    }

  }
}

三、页面路由
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOs提供了Router模块,通过不同的ur地址,可以方便地进行页面路由,轻松地访问不同的页面。
Router模块提供了两种跳转模式,分别是router.pushUrl()router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。
router.pushUrl(): 目标页不会替换当前页,而是压入页面栈。这样可以保留当前页的状态,并且可以通过返回键或者调用router.back()方法返回到当前页。
router.replaceUrl(): 目标页会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。
并且Router模块提供了两种实例模式,分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例
Standard: 标准模式,也是默认情况下的实例模式。每次调用该方法都会新建一个目标页,并压入栈顶。
Single: 单例模式。即如果目标页的url在页面栈中已经存在同ur页面,则离栈顶最近的同url页面会被移动到栈顶,并重新加载,如果目标页的url在页面栈中不存在同url页面,则按照标准模式跳转。

router.pushUrl()——>Standard  A跳转到B,栈中有B,还是新建B,A压入栈中,B在A上。

router.pushUrl()——>Single   A跳转到B,栈中有B,不新建B,A压入栈中,已有B提至A上。

router.replaceUrl()——>Standard  A跳转到B,栈中有B,还是新建B,销毁A。B置于栈顶。

 router.replaceUrl()——>Single   A跳转到B,栈中有B,不新建B,销毁A,已有B提至栈顶。


import router from '@ohos.router'

@Entry
@Component
struct PageRouter {
  @State message: string = '努力方向'
  @State list: Object[] = [{
    id: 1,
    name: "房子"
  }, { id: 2, name: "车子" }, { id: 3, name: "金条" }]

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        List() {
          ForEach(this.list, item => {
            ListItem() {
              Text(item.name).fontSize(40).margin({top:10}).fontColor(Color.Orange)
            }.width('100%').onClick(()=>{
               router.pushUrl({
                 url:'pages/PageRouterDetail',
                 params:{
                   id:item.id,
                   name:item.name
                 }
               },router.RouterMode.Standard)
            })
          })
        }
      }
      .width('100%')
    }
    .height('100%')
  }

  onPageShow(){
    const  param=router.getParams();
    console.log("PageRouter-onPageShow",JSON.stringify(param))
  }
}
import router from '@ohos.router'

@Entry
@Component
struct PageRouterDetail {
  @State message: string = '拿到'
  name: string

  aboutToAppear() {
    const param = router.getParams()
    const jsp=JSON.stringify(param)
    console.log("D_aboutToAppear",  jsp)
    this.name=JSON.parse(jsp).name
    console.log("D_aboutToAppear", this.name )

  }

  build() {
    Row() {
      Column() {
        Text(this.name)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button("返回").onClick(() => {
          this.onReturn1()
        })
      }
      .width('100%')
    }
    .height('100%')
  }

  onReturn1() {
    router.showAlertBeforeBackPage({
      message:'确定要返回吗?'
    })
    router.back({
      url:"pages/PageRouter",
      params:{
          id:4,
        name:"我发财了"
      }
    })
  }
}

四、程序入口

UIAbility是一种包含用户界面的应用组件,主要用于和用户进行交互。UIAbility也是系统调度的单元,为应用提供窗口在其中绘制界面。
每一个UIAbility实例,都对应于一个最近任务列表中的任务。

UIAbility生命周期

UIAbility是在module.json5里面配置的。

import common from '@ohos.app.ability.common'
@Entry
@Component
struct PageEntry {
  @State message: string = 'Hello World'
  private context =getContext(this) as common.UIAbilityContext

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button("跳转ability").onClick(()=>{

          let want={
            deviceId:"",
            bundleName:getContext(this.context).applicationInfo.name,//获得包名
            abilityName:"MoneyAbility",
            parameters:{
              name:"随便拿,都是你的了"
            }
          }
          this.context.startAbility(want)
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Entry
@Component
struct PageMoney {
  @State message: string = '金子银子随便拿'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      },
      {
        "name": "MoneyAbility",
        "srcEntry": "./ets/MoneyAbility/MoneyAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true
      }
    ]
  }
}
import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';

export default class MoneyAbility extends UIAbility {
  onCreate(want, launchParam) {
    console.log("MoneyAbility--",want?.parameters?.name)
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    AppStorage.SetOrCreate("name","房子")
    windowStage.loadContent('pages/PageMoney',(err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy() {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground() {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground() {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/489621.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于「技术开发技能」课程

本课程分为三个部分,带您了解如何使用大模型平台、如何训练与部署大模型及生成式AI产品应用与开发,您将能了解各类服务的优势、功能、典型使用案例、技术概念和成本。 学习任选的两个课程模块,并通过测验者,将授予「技术开发技能…

【C++】哈希应用之布隆过滤器

👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 🌝每一个不曾起舞的日子,都是对生命的辜负 目录 前言 1.布隆过滤器的提出…

vue基础——java程序员版(vue路由)

1、引入路由 在控制台执行vue ui,在插件市场里可以找到vue-router并导入。 ​ 一般情况下,vue会自动在main,js中引入vue-router,如下: import Vue from vue import App from ./App.vue import ./plugins/element.js import rou…

springboot整合aop实现自定义注解-方法运行异常重试demo

1.依赖引入 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>2.自定义注解 import java.lang.annotation.ElementType; import java.lang.annotation.Retentio…

简易电路设计,PW1605芯片实现24V/30V/48V限流过压保护功能

一般描述 PW1605 是一款电流限制开关&#xff0c;具有可编程输入过压保护和输出电压箝位功能。集成保护 N 沟道 FET 具有极低的 RDS&#xff08;ON&#xff09; 功能&#xff0c;PW1605有助于降低正常工作期间的功率损耗。可编程软启动时间控制启动期间输出电压的压摆率。独立的…

【LV15 day14 中断处理:按键驱动程序编写】

一、什么是中断 一种硬件上的通知机制&#xff0c;用来通知CPU发生了某种需要立即处理的事件 分为&#xff1a; 内部中断 CPU执行程序的过程中&#xff0c;发生的一些硬件出错、运算出错事件&#xff08;如分母为0、溢出等等&#xff09;&#xff0c;不可屏蔽外部中断 外设发…

一、SpringBoot3 介绍

本章概要 SpringBoot3 简介系统要求快速入门入门总结 1.1 SpringBoot3 简介 此处使用 SpringBoot 版本&#xff1a;3.0.5 https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html 无论使用XML、注解、Java配置类还是他们的混合用法&#xff0…

C语言学习--字符串和整型的转换

目录 整型→字符串 方法1&#xff1a;利用‘0’将单个数字转字符 方法2&#xff1a;利用sprintf函数 方法3&#xff1a;利用itoa函数 字符串→整型 方法1&#xff1a;利用-‘0’直接转换 方法2&#xff1a;利用atoi函数 整型→字符串 整形数据变成字符串&#xff0c;最…

数据结构从入门到精通——归并排序

归并排序 前言一、归并排序的基本思想二、归并排序的特性总结三、归并排序的动画展示四、递归实现归并排序的具体代码展示五、非递归实现归并排序 前言 归并排序是一种分治策略的排序算法。它将一个序列分为两个等长&#xff08;几乎等长&#xff09;的子序列&#xff0c;分别…

百度百科审核不通过全攻略,一看就会!

在撰写百度百科词条时&#xff0c;遇到审核不通过的情况可能会让人感到沮丧。然而&#xff0c;我们并不需要灰心&#xff0c;而是要通过一些方法来改善文章质量&#xff0c;使其符合百度百科的要求。腾轩科技传媒分享百度百科审核不通过全攻略&#xff0c;一看就会&#xff01;…

Docker Stack(堆栈) 部署多服务集群,多服务编排

1、Docker Stack简介 Docker Stack(堆栈) 是在 Swarm 上管理服务堆栈的工具。而在以前文章docker swarm集群搭建 介绍的 Docker Swarm 只能实现对单个服务的简单部署&#xff0c;于是就引出了Docker Stack。 上面我们介绍到 docker-compose&#xff1a;可以在一台机器上使用…

出差补助怎么发放更高效省心?这套攻略快看看

交补、餐补、话补等各类补助场景分散&#xff0c;无法实现一站式统筹管理。不仅如此&#xff0c;补贴核算也总是需要员工提供各类凭证&#xff0c;经过财务反复核实才能发放……出差发放补助原本是为了传递企业关怀&#xff0c;鼓励员工积极出差&#xff0c;由于发放和管理不当…

6 Spring-AOP

文章目录 1&#xff0c;AOP简介1.1 什么是AOP?1.2 AOP作用1.3 AOP核心概念 2&#xff0c;AOP入门案例2.1 需求分析2.2 思路分析2.3 环境准备2.4 AOP实现步骤步骤1:添加依赖步骤2:定义接口与实现类步骤3:定义通知类和通知步骤4:定义切入点步骤5:制作切面步骤6:将通知类配给容器…

新能源电车充电桩运营管理分析

摘要&#xff1a;近年来&#xff0c;我国大力推进新能源公共交通的发展&#xff0c;制定了一系列相关政策法规。作为公共充电设施的新能源充电桩也得到了发展和普及&#xff0c;其在新能源领域发挥着重要的保障作用。在当前&#xff0c;充电桩的管理还存在许多短板&#xff0c;…

MySql实战--全局锁和表锁 :给表加个字段怎么有这么多阻碍

今天我要跟你聊聊MySQL的锁。数据库锁设计的初衷是处理并发问题。作为多用户共享的资源&#xff0c;当出现并发访问的时候&#xff0c;数据库需要合理地控制资源的访问规则。而锁就是用来实现这些访问规则的重要数据结构。 根据加锁的范围&#xff0c;MySQL里面的锁大致可以分成…

开放式耳机性价比高的品牌有哪些呢?五大高性价比选购清单

不入耳开放式蓝牙耳机近两年开始火起来了&#xff0c;因为它佩戴的舒适性和安全性两方面受到了很多人的关注。开放式的设计&#xff0c;就算不放进耳朵里也能听歌&#xff0c;同时加上它独特的空气传导的传声途径&#xff0c;整体的音质还是很不错的。不压耳&#xff0c;不涨耳…

Redis 6.0.8版本下载

简介&#xff1a;Java领域优质创作者楠木 分享Java项目、简历模板、学习资料、面试题库 想必大家在下载redis之前已经逛了很多教程了&#xff0c;可能不尽如意&#xff0c;找不到自己的想要的版本。既然刷到了我的这条博客&#xff0c;说明你是幸运的&#xff01; Redis6.0.8的…

【Godot4自学手册】第二十七节自定义状态机完成看守地宫怪物

本节&#xff0c;我将使用自定义状态机实现看守地宫怪物&#xff0c;完成了基础类State&#xff0c;状态机类StateMachine的编码&#xff0c;实现了怪物的闲置巡逻类、追踪类和攻击类&#xff0c;以及对应动画等。这节代码有点多&#xff0c;不过还好&#xff0c;代码比较简单。…

C语言 汉诺塔问题

目录 1.前言 2.问题描述 3.问题分析 4.定义一个主函数 5.再定义一个hanoi函数 6.所有代码 7.结语 1.前言 汉诺塔问题&#xff0c;是心理学实验研究常用的任务之一。该问题的主要材料包括三根高度相同的柱子和一些大小及颜色不同的圆盘&#xff0c;三根柱子分别为起始柱A…

大数据入门(一)

大数据主要要解决&#xff1a;海量数据的采集&#xff0c;存储&#xff0c;分析计算问题。 大数据的特点&#xff1a;大量&#xff08;数据量大&#xff09;&#xff0c;高速&#xff08;数据量的累积越来越快&#xff09;&#xff0c;多样&#xff08;结构化数据和非结构化数…