【鸿蒙】HarmonyOS NEXT星河入门到实战8-自定义组件-组件通信

已于 2025-04-09 10:06:06 修改
阅读量1.1k 收藏 3
点赞数 3
分类专栏： HarmonyOS 文章标签： harmonyos 华为 鸿蒙
于 2024-09-13 13:12:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/legend818/article/details/142208273
版权

目录

1、模块化语法

1.1 模块化基本认知

1.2 默认导出和导入

1.2.1 在ets下新建tools目录

1.2.2 在tools下新建moduls.ets文件

1.2.3 index.ets

1.3 按需导出和导入

1.4 全部导入

2、自定义组件 -基础

2.1 自定义组件 - 基本使用

 2.2 自定义组件 -通用样式

2.2.1 ets下新建components文件夹

2.2.2 components新建HelloCom.ets

2.2.3 Index.ets

2.3 自定义组件 -成员函数变量

3、@BuilderParam

3.1 @BuilderParam 传递UI

3.2  多个 @BuilderParam 参数

4、 状态管理

4.1 状态管理概述

4.2 @ State 自己的状态

4.3 @Prop -父子单向

4.4 掘金评论案例

4.4.1 头部组件

4.4.1.1 在ets/components下新建InfoTop.ets

4.4.1.2 Index.ets

4.4.2 评论案例 - List列表组件的使用

4.4.2.1 List列表基本使用

 4.4.2.2 中间评论列表

4.4.2.2.1 在components下新增InfoItem.ets

4.4.2.2.2 Index .ets

4.4.3 底部评价

4.4.3.1 IconFont的使用

4.4.3.1.1 ets\fonts下存放下载的文件

4.4.3.1.2 注册字体&使用字体

4.4.3.2  在components下新增InfoBottom.ets

4.4.3.3  Index .ets

4.4.4 列表渲染

4.4.4.1 准备数据

4.4.4.2 列表渲染完成

4.4.4.3 点赞

4.4.4.4 添加评论

4.4.4.5 评论排序

4.5 @Link双向同步 

 4.6 @Provide \@Consume后代组件

4.7 @ Observed &@ObjectLink嵌套对象数组属性变化

前言：自定义组件-组件通信（模块化语法）、自定义组件、传递UI、状态管理

1、模块化语法

1.1 模块化基本认知

1.2 默认导出和导入

1.2.1 在ets下新建tools目录

 

1.2.2 在tools下新建moduls.ets文件

interface  Person {
  name: string
  age: number
}

let num: number = 10
let person: Person ={
  name: '春天的菠菜',
  age: 18
}
// 默认导出（导出一个值）
export  default num

1.2.3 index.ets

导入进来  import 导入进来新取的名称  from 路径（相对路径）

import window from '@ohos.window';
// 相对路径
import myNum from '../tools/moduls'

@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
   Column(){
     Text('来自tools/modlus 模块的值：'+ myNum)
       .textExtend()
   }
   .width('100%').height(100)
  }
}

1.3 按需导出和导入

 tools下新建/module3.ets

// 按需导出
// 多个特性, 逐个 export 按需导出
// export let name1: string = '刘备'
// export let price: number = 9.98
// export let sayHi = () => {
//   console.log('打招呼')
// }

let name1: string = '刘备'
let name2: string = '张飞'
let name3: string = '关羽'

let price: number = 9.98
let price2: number = 10.1

let sayHi = () => {
  console.log('打招呼')
}
let run = () => {
  console.log('跑步')
}

// 一次性将多个特性, 进行导出
export {
  name1, name2, name3,
  price, price2,
  sayHi, run
}



import window from '@ohos.window';
// 相对路径
import myNum from '../tools/moduls'
import { name1, price, sayHi }from '../tools/module3'

sayHi()

@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
   Column(){
     Text('来自tools/modlus 模块的值：'+ myNum)
       .textExtend().margin(5)
     Text('来自tools/module3 模块的值：'+ name1 +'**' + price )
       .textExtend()
   }
   .width('100%').height(100)
  }
}

1.4 全部导入

2、自定义组件 -基础

2.1 自定义组件 - 基本使用

1、无@Entry 2、 struct 后面自定义名称

import window from '@ohos.window';


@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
    Column() {
      MyHeader()
      MyMain()
      MyFooter()
    }
  }
}


@Component
struct MyCom {
  @State count: number = 1
  build() {
    Row() {
      Text(this.count.toString())
        .fontColor(Color.White)
        .margin(10)
      Button('按钮')
        .onClick(() => {
          this.count++
        })
    }
  }
}

@Component
struct MyHeader {
  build() {
    Row() {
      Text('我是头部')
        .fontColor(Color.White)
    }
    .width('100%')
    .height(50)
    .backgroundColor(Color.Brown)
  }
}

@Component
struct MyMain {
  build() {
    Column() {
      // 将相同的业务逻辑, 封装成一个通用的组件
      MyCom()
      MyCom()
      MyCom()
    }
    .layoutWeight(1)
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}

@Component
struct MyFooter {
  build() {
    Row() {
      Text('我是底部')
    }
    .width('100%')
    .height(50)
    .backgroundColor(Color.Green)
  }
}

 2.2 自定义组件 -通用样式

2.2.1 ets下新建components文件夹

2.2.2 components新建HelloCom.ets

@Preview
@Component
export struct HelloCom {
  build() {
    Row() {
      Text('自定义组件')
      Button('按钮')
    }
    .width(200)
    .height(50)
    .backgroundColor(Color.Orange)
  }
}

2.2.3 Index.ets

import window from '@ohos.window';
import { HelloCom } from '../components/HelloCom'

@Extend(Text)
function textExtend(){
  .fontSize(20)
  .fontWeight(700)
  .backgroundColor(Color.Green)
  .padding(10)
  .margin(5)
}



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
    Column() {
      HelloCom()
        .width(250)
        .height(60)
        .backgroundColor(Color.Gray)
        .onClick(() => {
          AlertDialog.show({
            message: '测试点击'
          })
        })
    }
  }
}

2.3 自定义组件 -成员函数变量

带=符号的可以外部传参

import window from '@ohos.window';




@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
    Column() {
      MyPanel({
        title: '我的订单',
        extra: '全部订单',
        getMore() {
          AlertDialog.show({
            message: '点击了全部订单'
          })
        }
      })
      MyPanel({
           title: '小米有品众筹',
        extra: '七款众筹中',
        getMore() {
          AlertDialog.show({
            message: '点击了众筹'
          })
        }
  }
      )

    }
    .width('100%').height('100%')
    .backgroundColor('#ccc')
    .padding(20)
  }
}

@Component
struct MyPanel {
  // 成员变量 -数据
  title: string = '默认的大标题'
  extra: string = '查看更多'

  // 成员变量 -函数 可以传入覆盖
  getMore = () =>{
    AlertDialog.show({
      message: '查看更多'
    })

  }

  // 成员函数  --  不可以外部传入覆盖
  sayHi (){
    AlertDialog.show({
      message: '打招呼 你好'
    })
}

  build() {
    Column(){
      Row(){
        Text(this.title)
          .fontSize(18)
        Text(this.extra)
          .fontSize(18)
          .onClick( () => {
            this.getMore()
          })

      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      Row(){
        Text('内容部分')
          .fontSize(18)
        Button('按钮')
          .onClick(() => {
            this.sayHi()
          })
      }
      .padding(20)

    }
    .width('100%').height(200)
    .margin({bottom: 20})
    .borderRadius(10)
    .padding(10)
    .backgroundColor(Color.White)
    
  }
}

3、@BuilderParam

3.1 @BuilderParam 传递UI

import window from '@ohos.window';



@Component
struct  SonCom {
  // 1、 定义构建函数
  @BuilderParam ContentBuilder: () => void = this.defaultBuilder
  @Builder
  defaultBuilder () {
    Text('默认的内容')
  }
  build() {
  //   2、 使用构建函数，构建结构
    Column(){
      this.ContentBuilder()
    }



  }
}

@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
    Column() {
      SonCom() {
        Button('传入的结构')
      }
    }


  }
}

练习

import window from '@ohos.window';



@Entry
@Component
struct Index {
  @State message: string = '@春天的菠菜';

  onPageShow(): void {
    window.getLastWindow(AppStorage.get("context"), (err, data) => {
      if (err.code) {
        console.error('Failed to get last window. Cause:' + JSON.stringify(err));
        return;
      }
      data.setFullScreen(true)
    });
  }

  build() {
    Column() {
      MyPanel({
        title: '我的订单',
        extra: '全部订单',
        getMore() {
          AlertDialog.show({
            message: '点击了全部订单'
          })
        }
      }) {
        Text('我是订单相关的文本')
      }
      MyPanel({
        title: '小米有品众筹',
        extra: '七款众筹中',
        getMore() {
          AlertDialog.show({
            message: '点击了众筹'
          })
        }
      }) {
        Button('我是小米众筹的按钮')
      }

    }
    .width('100%').height('100%')
    .backgroundColor('#ccc')
    .padding(20)
  }
}

@Component
struct MyPanel {
  // 成员变量 -数据
  title: string = '默认的大标题'
  extra: string = '查看更多'

  // 成员变量 -函数 可以传入覆盖
  getMore = () =>{
    AlertDialog.show({
      message: '查看更多'
    })

  }

  // 成员函数  --  不可以外部传入覆盖
  sayHi (){
    AlertDialog.show({
      message: '打招呼 你好'
    })
  }
  // 1、 定义构建函数
  @BuilderParam ContentBuilder: () => void = this.defaultBuilder
  @Builder
  defaultBuilder () {
    Text('默认的内容')
  }
  build() {
    Column(){
      Row(){
        Text(this.title)
          .fontSize(18)
        Text(this.extra)
          .fontSize(18)
          .onClick( () => {
            this.getMore()
          })

      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      Row(){
      //   这里结构不能写死，需要通过BUilderParam来进行构建
        this.ContentBuilder()
      }
      .padding(20)

    }
    .width('100%').height(200)
    .margin({bottom: 20})
    .borderRadius(10)
    .padding(10)
    .backgroundColor(Color.White)

  }
}

3.2  多个 @BuilderParam 参数

import window from '@ohos.window';

@Component
struct MyCard {
  @BuilderParam tBuilder: () => void = this.tDefaultBuilder
  @BuilderParam cBuilder: () => void = this.cDefaultBuilder
  @Builder tDefaultBuilder () {
    Text('我是默认的大标题')
  }
  @Builder cDefaultBuilder () {
    Text('我是默认的内容')
  }

  build() {
    // 卡片组件
    Column() {
      // 标题部分
      Row() {
        this.tBuilder()
      }
      .height(30)
      .width('100%')
      .border({ color: '#ccc', width: { bottom: 1 }})
      .padding({ left: 10 })
      // 内容部分
      Row() {
        this.cBuilder()
      }
      .width('100%')
      .padding(10)
    }
    .width('100%')
    .height(100)
    .backgroundColor(Color.White)
    .borderRadius(10)
    .justifyContent(F
最低0.47元/天 解锁文章
HarmonyOS 应用开发之创建自定义组件
maniuT的博客
04-02 1030
以下示例展示了自定义组件的基本用法。@Componentbuild() {// HelloComponent自定义组件组合系统组件Row和TextRow() {// 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!})如果在另外的文件中引用该自定义组件，需要使用export关键字导出，并在使用的页面import该自定义组件。HelloComponent可以在其他自定义组件中的build()函数中多次创建，实现自定义组件的重用。
【HarmonyOS实战开发】鸿蒙中实现组件化通信解耦
HarmonyOS_666的博客
07-26 1480
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙开发 组件导航 (Navigation)（二）
最新发布
ButcherCS的博客
04-20 637
开发者可以通过自定义路由表的方式来实现跨包动态路由，具体实现方法请参考 Navigation自定义动态路由 示例。1. 定义页面跳转配置项。使用资源文件进行定义，通过资源管理 @ohos.resourceManager 在运行时对资源文件解析。在ets文件中配置路由加载配置项，一般包括路由页面名称（即pushPath等接口中页面的别名），文件所在模块名称（hsp/har的模块名），加载页面在模块内的路径（相对src目录的路径）。
鸿蒙开发学习笔记——自定义组件
Sweet7weight的博客
03-18 1342
鸿蒙自定义组件
【鸿蒙南向开发】OpenHarmony应用组件间通信
HarmonyOS_666的博客
07-16 1103
使用 @State 和 @Prop 装饰器可以实现父组件向子组件单向传递数据。●定义子组件 Child@Component@Watch("listenChildCount") //当count变量值发生变化，会调用listenChildCount()@Propbuild() {Column() {Text("子组件:" + this.count).fontSize(30)})/*** 用于监听count变量的变化*/
HarmonyOS实战开发-深度探索与打造个性化自定义组件
m0_70749039的博客
05-08 721
今天分享一下 什么是自定义组件？及其自定义组件的实战。
【鸿蒙（ArkTs）开发---父子组件中的通讯（修饰符@State、 @Prop、@Link、@Provide、@Consume）】
我是盒饭 努力搬砖的码农
01-19 1943
【代码】【鸿蒙（ArkTs）开发---父子组件中的通讯（修饰符@State、 @Prop、@Link、@Provide、@Consume）】
HarmonyOS Next从入门到精通实战精品课
04-27 1732
Canvas完成矩形的绘制；华为闹钟的订阅和取消；华为闹钟的基本绘制；华为闹钟的时针-分针-秒针的绘制；华为闹钟的任务列表的样式；关于State的状态更新的须知；关于样式的简单介绍；关于vp和fp的介绍；知乎数据的真实的渲染；实现底部组件的封装；华为闹钟的添加闹钟；完成知乎小案例的UI布局；ForEach的商品列表案例；ForEach的商品列表的Grid布局；ForEach的key的一个简单介绍；Watch的刷题案例-做题的思路；State嵌套更新的实现方式；你画我猜的签字板实现；
鸿蒙（HarmonyOS）性能优化—Web开发常见问题
2401_82546228的博客
05-28 2068
问题现象onInterceptRequest拦截页面Web的src的链接后返回自定义HTML，但是自定义HTML文件里面的script标签里的内容没有加载。解决措施设置拦截器时，如果只设置setResponseData，内核将无法识别到这是个HTML文件，需要同时设置setResponseEncoding、setResponseMimeType、setResponseHeader等参数。代码示例})解决措施默认UserAgent需要通过WebviewController获取。
鸿蒙-组件
m0_66469301的博客
08-12 250
鸿蒙
鸿蒙(HarmonyOS)--声明式UI、自定义组件
hqy1989的博客
09-23 4815
说明自定义变量不能与基础通用属性/事件名重复。装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器@Component表示自定义组件@Entry表示该自定义组件为入口组件@State表示组件中的状态变量状态变量变化会触发UI刷新。UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
关于鸿蒙组件
m0_61305804的博客
08-14 410
由于px在不同手机上的大小不同，差别较大，适配性太差，不建议使用。由于手机分辨率不同，应用中用到的图片某个固定尺寸大小的图片，或某个固定字号的文本就会因手机分辨力不同而出现失真或变形的情况，为了更好的适配不同的手机，故而就有了不依赖与像素的单位sp与dp。padding-（top，right，left，bottom），不写的话就是上下左右都是，ef：设置好左右，上下的一边即可确定。margin-（top，right，left，bottom），不写的话就是上下左右都是。不同组件边框之间的距离（上下左右）...
鸿蒙Harmony开发：应用组件间的通信原理规范
2401_84917132的博客
08-25 1438
ETS 组件间通信是通过组合不同的装饰器来实现数据在各个组件之间的单向/双向传递。
【HarmonyOS NEXT】鸿蒙中实现组件化通信解耦
Android技术之家
07-29 282
1、前言在鸿蒙项目初期开发中，我们的代码结构可能是这样，features功能模块目录中，涉及到所有功能模块都调用的功能，都放到【公共功能】har中。但是，随着功能的不断增加，和时间推移。这种结构可能会有以下几种问题。公共功能har，代码臃肿，业务耦合严重，维护成本增加公共功能har，功能无法拆分，假如有手机、手表、汽车三种产品。公共功能har中不同产品可能需要得功能也是不一样的。无法做到产品功能隔...
[HarmonyOS]大概说一下鸿蒙组件通信如何实现？有几种方式？
H1453571548的博客
11-13 1169
在根组件通过 @Provide 定义数据，当进行页面跳转后，子页面都可以通过 @Consume 来获取该数据，实现跨页面的数据传递和共享。这种方式在页面层级关系较为复杂的情况下，能够方便地实现数据在不同页面间的传递和同步更新。
【鸿蒙HarmonyOS NEXT】页面和自定义组件生命周期
若兰幽竹
09-07 2776
需要明确几个概念：页面Page即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。onPageShow：页面每次显示时触发。onPageHide：页面每次隐藏时触发一次。onBackPress：当用户点击返回按钮时触发。自定义组件Component@Component装饰的UI单元，可以组合多个系统组件实现UI的复用。
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 871
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
鸿蒙应用开发（基础篇）之列表组件
xiangzhihong8的专栏
09-12 3534
List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

春天的菠菜

一毛两毛也是动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值