HarmonyOS NEXT零基础入门到实战-第四部分

自定义组件:
概念: 由框架直接提供的称为 系统组件, 由开发者定义的称为 自定义组件。
源代码:

@Component
struct MyCom {
  build() {
    Column() {
      Text('我是一个自定义组件')
    }
  }
}

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

// 快捷点 comp
@Component
struct MyMain{
  build() {
    Column() {
      MyCom()
      MyCom()
    }
    // .height(400)
    .layoutWeight(1)
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      MyHeader()
      MyMain()
      MyFooter()
    }
  }
}

自定义组件-通用属性和方法
// 尽量使用按需导出
@priview // 自定义view的预览
@Component
export struct 组件名{}

自定义组件---成员函数变量
除了必须要实现 build() 函数外,还可以定义其它的成员函数,以及成员变量
成员变量的值 -> 外部可传参覆盖  也就是带=号的变量及其方法都可以被覆盖
源代码:
@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)
      }
      .padding(20)
    }
    .width('100%')
    .height(200)
    .padding(10)
    .margin({bottom: 20})
    .borderRadius(10)
    .backgroundColor(Color.White)
  }
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      MyPanel({
        title: '我的订单',
        extra: '全部订单 >',
        getMore() {
          AlertDialog.show({
            message: '查看全部订单'
          })
        }
      })
      MyPanel({
        title: '小米有品众筹',
        extra: '7款众筹中 >',
        getMore() {
          AlertDialog.show({
            message: '查看7款众筹'
          })
        }
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
    .padding(20)
  }
}

@BuilderParam 传递UI

利用 @BuilderParam 构建函数,可以让自定义组件 允许外部传递UI。


@Component
struct SonCom {
  // 1、定义构建函数
  @BuilderParam ContentBuilder: () => void = this.defaultBuilder
  @Builder
  defaultBuilder() {
    Text('默认的内容')
      .fontColor('#000')
  }

  build() {
    // 2、使用构建函数,构建结构
    Column() {
      this.ContentBuilder()
    }
  }
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      // SonCom()
      SonCom() {
        Button('跳转')  // 则显示这个button,否则显示上面默认的内容
      }
    }
  }
}

完善的源代码:
@Component
@Preview
struct MyPanel {
  // 成员变量
  title: string = '默认的大标题'
  extra: string = '查看更多 >'
  // 成员变量 - 函数 - 可以外部传入覆盖的
  getMore = () => {
    AlertDialog.show({
      message: '查看更多'
    })
  }

  // 成员函数 - 不可以外部传入覆盖 【没有等号】
  sayHi() {
    AlertDialog.show({
      message: '你好'
    })
  }

  @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() {
        // Text('内容部分').fontSize(18)
        // 这里的结构不希望写死,需要通过 BuilderParams 来进行构建
        this.ContentBuilder()
      }
      .padding(20)
    }
    .width('100%')
    .height(200)
    .padding(10)
    .margin({bottom: 20})
    .borderRadius(10)
    .backgroundColor(Color.White)
  }
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      MyPanel({
        title: '我的订单',
        extra: '全部订单 >',
        getMore() {
          AlertDialog.show({
            message: '查看全部订单'
          })
        }
      }) {
        Text('我是订单 - 相关的文本')
      }
      MyPanel({
        title: '小米有品众筹',
        extra: '7款众筹中 >',
        getMore() {
          AlertDialog.show({
            message: '查看7款众筹'
          })
        }
      }) {
        Button('我是小米有品众筹的按钮')
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
    .padding(20)
  }
}

效果图:

多个 @BuilderParam 参数
子组件有多个BuilderParam, 必须通过参数的方式来传入

@Component
@Preview
struct MyCard {@BuilderParam titleBuilder: () => void = this.titleDefaultBuilder@BuildertitleDefaultBuilder() {Text('我是默认的大标题')}@BuilderParam contentBuilder: () => void = this.contentDefaultBuilder@BuildercontentDefaultBuilder() {Text('我是默认的内容')}build() {// 卡片组件Column() {// 标题部分Row() {this.titleBuilder()}.height(30).width('100%').border({color: '#ccc', width: {bottom: 1}}).padding({left: 10})// 内容部分Row() {this.contentBuilder()}.width('100%').padding(10)}.width('100%').height(100).borderRadius(10).backgroundColor(Color.White).justifyContent(FlexAlign.Start)}
}@Entry
@Component
struct Index {@Builder ftBuilder() {Text('我是传入的大标题结构')}@Builder fcBuilder() {Text('我是传入的大标题结构')}build() {Column({space: 10}) {// 希望标题部分和内容部分是自定义的MyCard({titleBuilder: this.ftBuilder,contentBuilder: this.fcBuilder})MyCard({titleBuilder: this.ftBuilder,contentBuilder: this.fcBuilder}) // {} 尾随闭包是不可以}.width('100%').height('100%').padding(20).backgroundColor('#ccc')}
}


 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【React】package.json 文件详解

文章目录 一、package.json 文件的基本结构二、package.json 文件的关键字段1. name 和 version2. description3. main4. scripts5. dependencies 和 devDependencies6. repository7. keywords8. author 和 license9. bugs 和 homepage 三、package.json 文件的高级配置1. 配置…

十、SpringBoot 统⼀功能处理【拦截器、统一数据返回格式、统一异常处理】

十、SpringBoot 统⼀功能处理 1. 拦截器【HandlerInterceptor、WebMvcConfig】1.1 拦截器快速⼊⻔⾃定义拦截器:实现HandlerInterceptor接⼝,并重写其所有⽅法注册配置拦截器:实现WebMvcConfigurer接⼝,并重写addInterceptors⽅法…

压测实操--produce压测方案

作者:九月 环境信息: 操作系统centos7.9,kafka版本为hdp集群中的2.0版本。 Producer相关参数 使用Kafka自带的kafka-producer-perf-test.sh脚本进行压测,该脚本参数为: 在producer涉及到性能的关键因素可能会存在如…

DetectorRS

文章目录 AbstractMethodExperimentAblation StudyMain Results Conclusion未来展望 link code Abstract 本文介绍了一种新的对象检测器——DetectoRS,通过在骨干网络设计中引入递归特征金字塔和可切换的空洞卷积机制,实现了出色的性能提升。在宏观层面…

谷粒商城实战笔记-54-商品服务-API-三级分类-拖拽效果

文章目录 一,54-商品服务-API-三级分类-修改-拖拽效果1,el-tree控件加上允许拖拽的属性2,是否允许拖拽3,完整代码 一,54-商品服务-API-三级分类-修改-拖拽效果 本节的主要内容是给三级分类树形结构加上拖拽功能&#…

四、GD32 MCU 常见外设介绍 (4) EXTI 中断介绍

4.EXTI 中断介绍 EXTI(中断/事件控制器)包含多个相互独立的边沿检测电路并且能够向处理器内核产生中断请求或唤醒事件。 EXTI 有三种触发类型:上升沿触发、下降沿触发和任意沿触发。 EXTI中的每一个边沿检测电路都可以独立配置和屏蔽。 4.1.GD32 EXTI 外设原理简介…

如何使用C#自制一个Windows安装包

原文链接:https://www.cnblogs.com/zhaotianff/p/17387496.html 以前都在用InstallShield制作安装包,基本需求是能满足的,但也有一些缺点: 1、界面不能完全定制 2、不能直接调用代码里的功能 平常使用一些其它软件,…

【基础算法总结】优先级队列

优先级队列 1.最后一块石头的重量2.数据流中的第 K 大元素4.前K个高频单词4.数据流的中位数 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励,我们一起努力吧!😃😃 1…

FPGA开发——LED流水灯实现先从左往右流水,再从右往左流水

一、概述 我们在设计完一个方向的流水灯的设计时,总是会想实现让流水灯倒着流水回去的设计,这里我也是一样,实现这种设计的方法有很多种,其中就有直接使用case语句将所有可能包含进去编写,这种设计方法是最简单的&…

leetcode日记(51)不同路径Ⅱ

和上一道题(无障碍物的最短路径)很像,但事实上比上一题多了优化方法 根据上一题改的代码如下,添加了对障碍物的判定,如果有障碍物则将数组值设为0。 class Solution { public:int uniquePathsWithObstacles(vector&l…

Origin制作线性拟合回归图

选中数据,点下方散点图 调整散点颜色 在分析中打开线性拟合回归 添加文本 显示上轴

算法 —— 暴力枚举

目录 循环枚举 P2241 统计方形(数据加强版) P2089 烤鸡 P1618 三连击(升级版) 子集枚举 P1036 [NOIP2002 普及组] 选数 P1157 组合的输出 排列枚举 P1706 全排列问题 P1088 [NOIP2004 普及组] 火星人 循环枚举 顾名思…

keil调试SH79F7416

仿真器JET51A, 调试设置 选择器件 再次点击调试就一切正常啦

快速汇总公司产品涉及的项目(服务、站点)

文章目录 引言I 快速汇总公司产品涉及的项目II 常用工具jar包转成exe应用远程操作常用命令III 把应用做成windows服务在后台运行借助工具`instsrv.exe`和`srvany.exe`把应用做成windows服务的步骤SysWOW64 文件夹的作用引言 需求:汇总 平台涉及站点和服务信息 I 快速汇总公司…

SkyWalking入门搭建【apache-skywalking-apm-10.0.0】

Java学习文档 视频讲解 文章目录 一、准备二、服务启动2-1、Nacos启动2-2、SkyWalking服务端启动2-3、SkyWalking控制台启动2-4、自定义服务接入 SkyWalking 三、常用监控3-1、服务请求通过率3-2、服务请求拓扑图3-3、链路 四、日志配置五、性能剖析六、数据持久化6-1、MySQL持…

MySQL SQL 编程练习

目录 创建表并插入数据 查看表结构 创建触发器 创建INSERT 触发器 创建DELETE 触发器 创建更新触发器 创建存储过程 创建提取emp_new表所有员工姓名和工资的存储过程s1 创建存储过程s2,实现输入员工姓名后返回员工的年龄 创建一个存储过程s3,有2个参数&…

Pytorch使用教学5-视图view与reshape的区别

有同学后台留言问为什么view有时可对张量进行形变操作,有时就会报错?另外它和reshape功能好像一致,有什么区别呢?本文就带你了解PyTorch中视图的概念。 在PyTorch中对张量进行形变操作时,很多同学也会使用view方法&am…

3.2、数据结构-数组、矩阵和广义表

数组结构 数组是定长线性表在维度上的扩展,即线性表中的元素又是一个线性表。N维数组是一种“同构”的数据结构,其每个数据元素类型相同、结构一致。 一个m行n列的数组表示如下: 其可以表示为行向量形式(一行一行的数据)或者列向量形式(一…

Windows搭建Nginx代理本地盘的文件 共享本地文件

一、查询自己的内网IP和外网IP的方法,以及判断是否直接连接到公网 内网IP,即局域网IP: 打开cmd窗口, 输入 ipconfig 后回车 外网IP,即公网IP: 打开cmd窗口,输入curl ifconfig.me指令访问ifconfi…

PE文件(十二)导入表

导入表 导入表的引入 当一个PE文件(如.dll/.exe等)需要使用别的模块的函数,也叫做依赖某模块,就需要一个清单来记录使用的模块(一般为.dll文件,为方便理解,以后我们将模块都认为是.dll文件&am…