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

news2024/12/24 0:57:29

课程地址： 黑马程序员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 : string
  image : ResourceStr
  price : number
  discount : number

  constructor(name:string, image:ResourceStr, price:number, discount:number=0) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

// 在当前页面定义组件
@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)
  }
}

@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 : string
  image : ResourceStr
  price : number
  discount : number

  constructor(name:string, image:ResourceStr, price:number, discount:number=0) {
    this.name = name
    this.image = image
    this.price = price
    this.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)
  }

}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

百川crm系统 教育crm系统 一款高效的培训机构管理系统

百川crm系统 教育crm系统 一款高效的培训机构管理系统

在教育培训行业日益竞争激烈的今天&#xff0c;如何精准把握客户需求、提升服务质量、实现客户价值最大化&#xff0c;成为了每一家教育培训机构都必须面对的问题。为此&#xff0c;一款高效、智能的CRM客户管理系统成为了教育培训机构不可或缺的得力助手。本文将为您详细介绍这…
阅读更多...
使用xshell工具连接ubuntu的root账户被拒绝的解决方法

使用xshell工具连接ubuntu的root账户被拒绝的解决方法

问题描述&#xff1a; 我在使用xshell工具远程连接Ubuntu虚拟机的过程中&#xff0c;如果连接的是的普通用户则xshell工具可以正常连接&#xff0c;但是当我向连接ubuntu系统的root用户&#xff0c;即便是密码输入正确但还是不能连接成功。不能连接成功的截图如下&#xff1a; …
阅读更多...
C#---使用Coravel实现定时任务

C#---使用Coravel实现定时任务

Coravel是一款框架轻&#xff0c;使用简单&#xff0c;支持秒级定时任务。 1.添加NuGet引用 2.定义自己的工作任务 using Coravel.Invocable; using Microsoft.Extensions.Logging; using System; using System.Collections.Generic; using System.Linq; using System.Thread…
阅读更多...
【navicat】oracle library is not loaded 问题复现和解决方案

【navicat】oracle library is not loaded 问题复现和解决方案

问题原因&#xff1a;客户端oci版本安装错误&#xff0c;navicat需要64位的oci,但是使用32位的oci。 解决方案&#xff1a;官网下载64位oci进行配置。本次演示的解决多了splplus&#xff0c;其实不必要安装也能运行。 首先判断是否数据库已经打开 尝试使用splplus连接数据库 1…
阅读更多...
MYSQL自联结

MYSQL自联结

文章目录 查找&#xff1a;生产ID为DTNTR物品的供应商&#xff0c;生产的其他物品。子查询自联结比较 查找&#xff1a;生产ID为DTNTR物品的供应商&#xff0c;生产的其他物品。 子查询 SELECTprod_id,prod_name FROMproducts WHEREvend_id ( SELECT vend_id FROM product…
阅读更多...
静电纺聚丙烯腈（PAN）纳米纤维膜

静电纺聚丙烯腈（PAN）纳米纤维膜

静电纺聚丙烯腈&#xff08;PAN&#xff09;纳米纤维膜是通过静电纺丝技术制备的一种纳米级纤维膜材料。静电纺丝技术利用高压电场使带电的聚合物溶液或熔体在喷丝口形成细流&#xff0c;经过拉伸、固化后形成纳米纤维&#xff0c;最终收集形成纳米纤维膜。 PAN纳米纤维膜具有以…
阅读更多...
Unity涂鸦纹理实现

Unity涂鸦纹理实现

文章目录 前言实现过程UV坐标和UI坐标对齐修改像素代码 前言 心血来潮实现下场景中提供一张纹理进行涂鸦的功能。 最终实现效果: 实现过程 UV坐标和UI坐标对齐 这里的纹理使用了UGUI的Canvas进行显示&#xff0c;所以这里使用一张RawImage。 因为Unity的视口坐标是以左下角…
阅读更多...
微服务之SpringCloud AlibabaSeata处理分布式事务

微服务之SpringCloud AlibabaSeata处理分布式事务

一、概述 1.1背景 一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用&#xff0c;就会产生分布式事务问题 but 关系型数据库提供的能力是基于单机事务的&#xff0c;一旦遇到分布式事务场景&#xff0c;就需要通过更多其他技术手段来解决问题。 全局事务&#xff1a;…
阅读更多...
SOLIDWORKS2021：革新设计界的里程碑，引领您迈向数字化制造未来

SOLIDWORKS2021：革新设计界的里程碑，引领您迈向数字化制造未来

在2021年&#xff0c;SOLIDWORKS 2021的发布犹如一股清新的创新之风&#xff0c;吹遍了整个设计与工程领域。作为业界领先的3D CAD解决方案&#xff0c;SOLIDWORKS 2021不仅巩固了其在设计软件领域的领导地位&#xff0c;更以前所未有的方式激发了设计者的创造力与生产力。亿达…
阅读更多...
Flask教程3：jinja2模板引擎

Flask教程3：jinja2模板引擎

文章目录 模板的导入与使用 模板的导入与使用 Flask通过render_template来实现模板的渲染&#xff0c;要使用这个方法&#xff0c;我们需要导入from flask import rander_template&#xff0c;模板中注释需放在{# #}中 模板的第一个参数为指定的模板文件名称&#xff0c;如自定…
阅读更多...
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）

有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）

前言&#xff1a;在练习CSS排版的时候&#xff0c;我们经常会遇到一些排版上的问题&#xff0c;那么我们如何去解决这些问题呢&#xff1f;本篇文章给出了一些新手在练习排版时候可能会遇到的问题的解决方案。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我…
阅读更多...
1天搞定uniApp+Vue3+vite+Element UI或者Element Plus开发学习，使用vite构建管理项目,HBuilderX做为开发者工具

1天搞定uniApp+Vue3+vite+Element UI或者Element Plus开发学习，使用vite构建管理项目,HBuilderX做为开发者工具

我们通常给小程序或者app开发后台时&#xff0c;不可避免的要用到可视化的数据管理后台&#xff0c;而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。 准备工作 1&#xff0c;下载HBuilderX 开发者…
阅读更多...
Python 可以对数据进行哪些可视化？

Python 可以对数据进行哪些可视化？

Python 可视化 一、条形图&#xff08;或柱状图&#xff09; 1.代码如下&#xff1a; import matplotlib.pyplot as plt import pandas as pddf pd.DataFrame({County:[America,Canada,Australia,Germany,French,China],GDP:[80,30,70,80,60,75] })plt.bar(df[County],df[G…
阅读更多...
Linux 虚拟主机切换php版本及参数

Linux 虚拟主机切换php版本及参数

我使用的Hostease的Linux虚拟主机产品,由于网站程序需要支持高版本的PHP,程序已经上传到主机&#xff0c;但是没有找到切换PHP以及查看PHP有哪些版本的位置&#xff0c;因此咨询了Hostease的技术支持&#xff0c;寻求帮助了解到可以实现在cPanel面板上找到此切换PHP版本的按钮&…
阅读更多...
ElasticSearch教程入门到精通——第二部分（基于ELK技术栈elasticsearch 7.x新特性）

ElasticSearch教程入门到精通——第二部分（基于ELK技术栈elasticsearch 7.x新特性）

ElasticSearch教程入门到精通——第二部分&#xff08;基于ELK技术栈elasticsearch 7.x新特性&#xff09; 1. JavaAPI-环境准备1.1 新建Maven工程——添加依赖1.2 HelloElasticsearch 2. 索引2.1 索引——创建2.2 索引——查询2.3 索引——删除 3. 文档3.1 文档——重构3.2 文…
阅读更多...
Docker部署RabbitMQ与简单使用

Docker部署RabbitMQ与简单使用

官网地址&#xff1a; Messaging that just works — RabbitMQ 我的Docker博客:Docker-CSDN博客 1.结构 其中包含几个概念&#xff1a; **publisher**&#xff1a;生产者&#xff0c;也就是发送消息的一方 **consumer**&#xff1a;消费者&#xff0c;也就是消费消息的一方 …
阅读更多...
Java image-processing 包依赖错误

Java image-processing 包依赖错误

错误的信息为&#xff1a; [ERROR] Failed to execute goal on project image-processing: Could not resolve dependencies for project com.ossez:image-processing:jar:0.0.2-SNAPSHOT: Failed to collect dependencies at org.openimaj:core-image:jar:1.3.10 -> org.op…
阅读更多...
Java Maven 编译资源文件拷贝错误 dirCompressed.zip failed with MalformedInputException:

Java Maven 编译资源文件拷贝错误 dirCompressed.zip failed with MalformedInputException:

完整的错误信息为&#xff1a; [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.3.1:resources (default-resources) on project core-java-io: filtering C:\WorkDir\Repository\iSharkfly-Docs\java-tutorials\core-java-modules\core-ja…
阅读更多...
简单数据加解密，JS和JAVA同时实现

简单数据加解密，JS和JAVA同时实现

前端Vue调用Java后端接口中的数据进行加密&#xff0c;以避免敏感数据泄露。 现在实现一个高性能加密方法&#xff0c;用来对数据进行加密后传输。算法包括JS的加密和解密方法&#xff0c;也包括Java的加密解密方法。 可以在前端加密&#xff0c;后端解密。也可以在后端加密&…
阅读更多...
JAVAEE—servlet的概念及使用，使用servlet接口实现一个表白墙

JAVAEE—servlet的概念及使用，使用servlet接口实现一个表白墙

文章目录 servlet的概念静态页面和动态页面servlet的作用 写出一个servlet程序目录的创建设置smart tomcat编写helloworld servlet的概念 首先我们要搞明白什么是servlet&#xff0c;servlet是一种实现动态页面的技术&#xff0c;他是由tomcat提供给程序员的一组API可以帮助程…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023