【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（七）

2024-05-01 13:04
文章标签 实战 学习 入门 教程 笔记 课程 企业级 next 星河 harmonyos4

本文主要是介绍【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（七），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

课程地址： 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发

（本篇笔记对应课程第 14 节）

P14《13.ArkUI组件-自定义组件》

在这里插入图片描述

将可变部分封装成组件的成员变量：

在这里插入图片描述

1、首先给标题添加两个图标：加好两个Image后发现三个元素是挨在一起的，为了让最后一个搜索图标排列到最右侧，我们在它前面加一个 Blank() 组件， Blank() 组件的作用是占满其它元素剩余的空间，这样它将 “商品列表”标题与两个图标剩余的空间占满了，搜索图标自然就排列到最右侧啦
在这里插入图片描述

将标题部分剪切，这一部分代码用来封装组件：

在这里插入图片描述

定义组件有两种方式：第一种是在当前页面，第二种是抽取到一个单独的文件中。我们先在当前页面试一下：
用 @Component 定义一个组件，将刚才剪切的代码放入 struct Header {} 中，并定义一个私有变量 title，代表标题的文案内容：

在这里插入图片描述

在当前页面使用这个自定义的组件：可以发现，和刚才不封装组件的效果一模一样滴~

在这里插入图片描述

接下来尝试第二种：将封装的组件单独放到一个文件中，剪切这部分代码

在这里插入图片描述

在 ets 目录下新建 components文件夹，在其中新建 CommonComponents.ets 文件，将刚才剪切的代码放进来，因为其它文件要引入这个组件，所以前面需要加上 export 关键字导出：

在这里插入图片描述

在需要使用组件的文件中用 import 导入并使用：

在这里插入图片描述

在当前组件封装组件和将组件提取到单独文件这两种方式就都实现啦！

接下来我们再看一个问题：看这段代码，会发现代码很多，可读性很差，折叠起来发现其实只有一个Row，里面是每一个商品。这时就可以进行优化，可以对商品卡片 Row 这一部分进行封装，可以使用我们刚讲过的自定义组件的方式，也可以用另一种方式：自定义构建函数。

什么是自定义构建函数？它就是用来构建页面的函数，它对于内部页面的封装更加合适。

在这里插入图片描述

全局自定义构建函数并使用：

在这里插入图片描述
在这里插入图片描述

这时再看代码会发现，清爽了很多：

在这里插入图片描述

局部定义自定义构建函数：将构建函数定义在 struct 内部，且此时不需要 function 关键字；

在这里插入图片描述

使用时需要用 this 来调用：

在这里插入图片描述

自定义公共样式：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

定义局部公共样式函数，使用方式和上面是一样的，直接调用这个函数：

在这里插入图片描述

接下来我们发现价格文本的字体样式也有很多重复定义的样式语句，同样将它抽取为公共样式函数，却发现怎么标红报错，查看报错提示，说是这些样式不是所有组件都可以使用的通用样式属性，这时怎么办呢？

将Styles 改为 Extend 并传入 Text 组件，这里需要注意：Extend 只能写在全局，不能写到局部里面！！！

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

使用：

在这里插入图片描述

使用定义公共样式函数的好处就是需要改变这个样式时，只改变一处，使用这个样式的地方就都改变了。

总结：
在这里插入图片描述

在这里插入图片描述

实践：

1、自定义标题组件：

在当前页面定义组件并使用：
在这里插入图片描述

class Item {name : stringimage : ResourceStrprice : numberdiscount : numberconstructor(name:string, image:ResourceStr, price:number, discount:number=0) {this.name = namethis.image = imagethis.price = pricethis.discount = discount}
}// 在当前页面定义组件
@Component
struct Header {private title:ResourceStrbuild(){Row(){Image($r('app.media.icon_back')).width(40)Text(this.title).fontSize(28)Blank()Image($r('app.media.icon_search')).width(40)}.width('100%').height(60).padding({left:14, right:14}).justifyContent(FlexAlign.Start)}
}@Entry
@Component
struct ItemsPage {// 商品数据private items: Array<Item> = [new Item('FreeBuds 5i', $r('app.media.1'), 449),new Item('FreeBuds Pro 3典藏版', $r('app.media.2'), 1449, 500),new Item('问界 新M5', $r('app.media.3'), 291800),new Item('WATCH 4 Pro', $r('app.media.4'), 4999),new Item('华为智慧屏 S5', $r('app.media.5'), 5799),new Item('华为智慧屏 S5', $r('app.media.5'), 5799),new Item('华为智慧屏 S5', $r('app.media.5'), 5799),new Item('华为智慧屏 S5', $r('app.media.5'), 5799)]build(){Column(){// 标题部分Header({title:'商品列表666'})List({space:10}){ForEach(this.items,(item:Item) => {ListItem(){Row({space:10}){Image(item.image).width(100)Column(){Text(item.name).fontSize(18).fontColor('#444').fontWeight(FontWeight.Bold)if(item.discount){Text('原价￥：' + item.price).fontSize(18).fontColor('#888').decoration({type:TextDecorationType.LineThrough})Text('折扣价￥：' + (item.price - item.discount)).fontSize(18).fontColor('#6d6d')Text('补贴￥：' + item.discount).fontSize(18).fontColor('#6d6d')}else{Text('￥：' + item.price).fontSize(18).fontColor('#6d6d')}}.alignItems(HorizontalAlign.Start)}.width('100%').padding({left:14, right:14}).backgroundColor('#fff').borderRadius(8)}})}.padding({left:10,right:10}).layoutWeight(1)}.width('100%').height('100%').backgroundColor('#eee')}
}

将封装组件提取到单独文件中：

在这里插入图片描述

在这里插入图片描述

2、全局与局部定义自定义构建函数：

class Item {name : stringimage : ResourceStrprice : numberdiscount : numberconstructor(name:string, image:ResourceStr, price:number, discount:number=0) {this.name = namethis.image = imagethis.price = pricethis.discount = discount}
}import { Header } from '../components/CommonComponents'// 在当前页面定义组件
// @Component
// struct Header {
//   private title:ResourceStr
//   build(){
//     Row(){
//       Image($r('app.media.icon_back'))
//         .width(40)
//
//       Text(this.title)
//         .fontSize(28)
//       Blank()
//       Image($r('app.media.icon_search'))
//         .width(40)
//     }
//     .width('100%')
//     .height(60)
//     .padding({left:14, right:14})
//     .justifyContent(FlexAlign.Start)
//   }
// }// 全局自定义构建函数
// @Builder function ItemCard(item:Item){
//   Row({space:10}){
//     Image(item.image)
//       .width(100)
//     Column(){
//       Text(item.name)
//         .fontSize(18)
//         .fontColor('#444')
//         .fontWeight(FontWeight.Bold)
//
//       if(item.discount){
//         Text('原价￥：' + item.price)
//           .fontSize(18)
//           .fontColor('#888')
//           .decoration({type:TextDecorationType.LineThrough})
//         Text('折扣价￥：' + (item.price - item.discount))
//           .fontSize(18)
//           .fontColor('#6d6d')
//         Text('补贴￥：' + item.discount)
//           .fontSize(18)
//           .fontColor('#6d6d')
//       }else{
//         Text('￥：' + item.price)
//           .fontSize(18)
//           .fontColor('#6d6d')
//       }
//     }
//     .alignItems(HorizontalAlign.Start)
//   }
//   .width('100%')
//   .padding({left:14, right:14})
//   .backgroundColor('#fff')
//   .borderRadius(8)
// }@Entry
@Component
struct ItemsPage {// 商品数据private items: Array<Item> = [new Item('FreeBuds 5i', $r('app.media.1'), 449),new Item('FreeBuds Pro 3典藏版', $r('app.media.2'), 1449, 500),new Item('问界 新M5', $r('app.media.3'), 291800),new Item('WATCH 4 Pro', $r('app.media.4'), 4999),new Item('华为智慧屏 S5', $r('app.media.5'), 5799),new Item('华为智慧屏 S5', $r('app.media.5'), 5799),new Item('华为智慧屏 S5', $r('app.media.5'), 5799),new Item('华为智慧屏 S5', $r('app.media.5'), 5799)]build(){Column(){// 标题部分Header({title:'商品列表888'})List({space:10}){ForEach(this.items,(item:Item) => {ListItem(){// 使用全局自定义构建函数// ItemCard(item)// 使用局部自定义构建函数this.ItemCard(item)}})}.padding({left:10,right:10}).layoutWeight(1)}.width('100%').height('100%').backgroundColor('#eee')}// 局部自定义构建函数@Builder ItemCard(item:Item){Row({space:10}){Image(item.image).width(100)Column(){Text(item.name).fontSize(18).fontColor('#444').fontWeight(FontWeight.Bold)if(item.discount){Text('原价￥：' + item.price).fontSize(18).fontColor('#888').decoration({type:TextDecorationType.LineThrough})Text('折扣价￥：' + (item.price - item.discount)).fontSize(18).fontColor('#6d6d')Text('补贴￥：' + item.discount).fontSize(18).fontColor('#6d6d')}else{Text('￥：' + item.price).fontSize(18).fontColor('#6d6d')}}.alignItems(HorizontalAlign.Start)}.width('100%').padding({left:14, right:14}).backgroundColor('#fff').borderRadius(8)}}

这篇关于【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（七）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/951761。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
学习hash总结

学习hash总结

2014/1/29/   最近刚开始学hash，名字很陌生，但是hash的思想却很熟悉，以前早就做过此类的题，但是不知道这就是hash思想而已，说白了hash就是一个映射，往往灵活利用数组的下标来实现算法，hash的作用：1、判重；2、统计次数；
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2