鸿蒙开发学习笔记——自定义组件

最新推荐文章于 2024-06-19 09:37:42 发布
最新推荐文章于 2024-06-19 09:37:42 发布
阅读量788 收藏 8
点赞数 8
分类专栏： 鸿蒙开发 文章标签： harmonyos 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sweet7weight/article/details/136794948
版权

自定义组件能够复用，提高编程效率，开头不需要加@Entry，表明不是入口组件，不能直接展示，要被入口组件复用才可展示。

比如我们创建的两个页面，它们的头部是差不多的，那我们就可以把头部单独抽取出来做成一个组件，在写页面时复用即可，要注意不要将需要改变的部分写死。

一、例子

我们将页面头部自定义成一个组件，将来在别的页面中也能使用。

1.导入图标资源

要实现这个效果，首先我们需要导入图标资源至entry/src/main/resources/base/media：

2.创建头部组件

1.文件以及目录创建

首先在ets文件下新建一个components文件夹用来存放组件，再在此文件夹下新建一个.ets文档来写头部组件。

这里我新建一个名为CommonComponent来写通用组件。

2.编写头部组件

@Component
// export 组件可导出
export struct Header {

  private title: string

  build(){
    // 标题
    Row(){
      Image($r('app.media.ic_public_arrow_left'))
        .width(50)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      // 空白
      Blank()
      Image($r('app.media.ic_public_refresh'))
        .width(30)
    }
    .width('100%')
    .height(30)
  }
}

3.页面引入该组件

目录结构如下

在Index.ets中导入Header()

import { Header } from '../components/CommonComponent'

使用Header()

// 标题部分
      Header({ title: '商品列表' })
        .margin({ bottom: 20 })

完整代码如下：

// 定义商品类
class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  // discount初始化为0
  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/CommonComponent'

@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('Pocket系列', $r('app.media.Pocket'), 7499, 500),
    new Item('Mate系列', $r('app.media.Mate'), 6499),
    new Item('P系列', $r('app.media.P'), 6988),
    new Item('nova系列', $r('app.media.nova'), 4699),
    new Item('畅想系列', $r('app.media.nav'), 1499),
    new Item('畅想系列', $r('app.media.nav'), 1499)
  ]

  build() {
    Column({ space: 8 }) {

      // 标题部分
      Header({ title: '商品列表' })
        .margin({ bottom: 20 })

      // 定义列表
      List({ space: 8 }) {
        ForEach(
          this.items,
          // 也可以写成item => {}，但因为传进来的item类型为any，所以没有提示，声明变量类型后就有提示了
          (item: Item) => {
            ListItem() {
              Row({ space: 10 }) {
                Image(item.image)
                  .width(100)
                Column({ space: 4 }) {
                  // 如果有折扣 渲染只有这里有变化
                  if (item.discount) {
                    Text(item.name)
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)
                    Text('原价：￥' + item.price)
                      .fontColor('#CCC')
                      .fontSize(14)
                      .decoration({ type: TextDecorationType.LineThrough })
                    Text('折扣价：￥' + (item.price - item.discount))
                      .fontColor('#F36')
                      .fontSize(18)
                    Text('补贴：￥' + item.discount)
                      .fontColor('#F36')
                      .fontSize(18)
                  } else {
                    Text(item.name)
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)
                    Text('￥' + item.price)
                      .fontColor('#F36')
                      .fontSize(18)
                  }
                }
                .height('100%')
                .alignItems(HorizontalAlign.Start)
              }
              .width('100%')
              .backgroundColor('#FFF')
              .borderRadius(20)
              .height(120)
              .padding(10)
            }
          }
        )

      }
      .width('100%')
      .layoutWeight(1) // 权重配比

    }
    .width('100%')
    .height('100%')
  }
}

效果图：

3.进一步优化

我们发现上面代码可读性还是很差，中间商品展示代码可用自定义组件展示，也可以用自定义构建函数封装（适合做内部页面封装）。

3.1自定义构造函数封装代码

1）全局自定义构造函数
// 定义商品类
class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  // discount初始化为0
  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/CommonComponent'

// 全局自定义构造函数
@Builder function ItemCard(item: Item) {
  Row({ space: 10 }) {
    Image(item.image)
      .width(100)
    Column({ space: 4 }) {
      // 如果有折扣 渲染只有这里有变化
      if (item.discount) {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥' + item.price)
          .fontColor('#CCC')
          .fontSize(14)
          .decoration({ type: TextDecorationType.LineThrough })
        Text('折扣价：￥' + (item.price - item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴：￥' + item.discount)
          .fontColor('#F36')
          .fontSize(18)
      } else {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥' + item.price)
          .fontColor('#F36')
          .fontSize(18)
      }
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}

@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('Pocket系列', $r('app.media.Pocket'), 7499, 500),
    new Item('Mate系列', $r('app.media.Mate'), 6499),
    new Item('P系列', $r('app.media.P'), 6988),
    new Item('nova系列', $r('app.media.nova'), 4699),
    new Item('畅想系列', $r('app.media.nav'), 1499),
    new Item('畅想系列', $r('app.media.nav'), 1499)
  ]

  build() {
    Column({ space: 8 }) {

      // 标题部分
      Header({ title: '商品列表' })
        .margin({ bottom: 20 })

      // 商品列表部分
      List({ space: 8 }) {
        ForEach(
          this.items,
          // 也可以写成item => {}，但因为传进来的item类型为any，所以没有提示，声明变量类型后就有提示了
          (item: Item) => {
            ListItem() {
              // 使用自定义构建函数
              ItemCard(item)
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1) // 权重配比

    }
    .width('100%')
    .height('100%')
  }
}
2）局部自定义构造函数
// 定义商品类
class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  // discount初始化为0
  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/CommonComponent'

/*// 全局自定义构造函数
@Builder function ItemCard(item: Item) {
  Row({ space: 10 }) {
    Image(item.image)
      .width(100)
    Column({ space: 4 }) {
      // 如果有折扣 渲染只有这里有变化
      if (item.discount) {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥' + item.price)
          .fontColor('#CCC')
          .fontSize(14)
          .decoration({ type: TextDecorationType.LineThrough })
        Text('折扣价：￥' + (item.price - item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴：￥' + item.discount)
          .fontColor('#F36')
          .fontSize(18)
      } else {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥' + item.price)
          .fontColor('#F36')
          .fontSize(18)
      }
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}*/

@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('Pocket系列', $r('app.media.Pocket'), 7499, 500),
    new Item('Mate系列', $r('app.media.Mate'), 6499),
    new Item('P系列', $r('app.media.P'), 6988),
    new Item('nova系列', $r('app.media.nova'), 4699),
    new Item('畅想系列', $r('app.media.nav'), 1499),
    new Item('畅想系列', $r('app.media.nav'), 1499)
  ]

  build() {
    Column({ space: 8 }) {

      // 标题部分
      Header({ title: '商品列表' })
        .margin({ bottom: 20 })

      // 商品列表部分
      List({ space: 8 }) {
        ForEach(
          this.items,
          // 也可以写成item => {}，但因为传进来的item类型为any，所以没有提示，声明变量类型后就有提示了
          (item: Item) => {
            ListItem() {
              // 使用自定义构建函数
              this.ItemCard(item)
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1) // 权重配比

    }
    .width('100%')
    .height('100%')
  }
  // 局部自定义构造函数 不加function
  @Builder ItemCard(item: Item) {
    Row({ space: 10 }) {
      Image(item.image)
        .width(100)
      Column({ space: 4 }) {
        // 如果有折扣 渲染只有这里有变化
        if (item.discount) {
          Text(item.name)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('原价：￥' + item.price)
            .fontColor('#CCC')
            .fontSize(14)
            .decoration({ type: TextDecorationType.LineThrough })
          Text('折扣价：￥' + (item.price - item.discount))
            .fontColor('#F36')
            .fontSize(18)
          Text('补贴：￥' + item.discount)
            .fontColor('#F36')
            .fontSize(18)
        } else {
          Text(item.name)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('￥' + item.price)
            .fontColor('#F36')
            .fontSize(18)
        }
      }
      .height('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .backgroundColor('#FFF')
    .borderRadius(20)
    .height(120)
    .padding(10)
  }
}

3.2样式优化

不管是全局的还是局部的，只能封装公共样式，组件特有的样式不行。

1）全局公共样式
// 定义商品类
class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  // discount初始化为0
  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/CommonComponent'

/*// 全局自定义构造函数
@Builder function ItemCard(item: Item) {
  Row({ space: 10 }) {
    Image(item.image)
      .width(100)
    Column({ space: 4 }) {
      // 如果有折扣 渲染只有这里有变化
      if (item.discount) {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥' + item.price)
          .fontColor('#CCC')
          .fontSize(14)
          .decoration({ type: TextDecorationType.LineThrough })
        Text('折扣价：￥' + (item.price - item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴：￥' + item.discount)
          .fontColor('#F36')
          .fontSize(18)
      } else {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥' + item.price)
          .fontColor('#F36')
          .fontSize(18)
      }
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}*/

// 全局公共样式
@Styles function fillScreen() {
  .width('100%')
  .height('100%')
}

@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('Pocket系列', $r('app.media.Pocket'), 7499, 500),
    new Item('Mate系列', $r('app.media.Mate'), 6499),
    new Item('P系列', $r('app.media.P'), 6988),
    new Item('nova系列', $r('app.media.nova'), 4699),
    new Item('畅想系列', $r('app.media.nav'), 1499),
    new Item('畅想系列', $r('app.media.nav'), 1499)
  ]

  build() {
    Column({ space: 8 }) {

      // 标题部分
      Header({ title: '商品列表' })
        .margin({ bottom: 20 })

      // 商品列表部分
      List({ space: 8 }) {
        ForEach(
          this.items,
          // 也可以写成item => {}，但因为传进来的item类型为any，所以没有提示，声明变量类型后就有提示了
          (item: Item) => {
            ListItem() {
              // 使用自定义构建函数
              this.ItemCard(item)
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1) // 权重配比

    }
    .fillScreen()
  }
  // 局部自定义构造函数 不加function
  @Builder ItemCard(item: Item) {
    Row({ space: 10 }) {
      Image(item.image)
        .width(100)
      Column({ space: 4 }) {
        // 如果有折扣 渲染只有这里有变化
        if (item.discount) {
          Text(item.name)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('原价：￥' + item.price)
            .fontColor('#CCC')
            .fontSize(14)
            .decoration({ type: TextDecorationType.LineThrough })
          Text('折扣价：￥' + (item.price - item.discount))
            .fontColor('#F36')
            .fontSize(18)
          Text('补贴：￥' + item.discount)
            .fontColor('#F36')
            .fontSize(18)
        } else {
          Text(item.name)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('￥' + item.price)
            .fontColor('#F36')
            .fontSize(18)
        }
      }
      .height('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .backgroundColor('#FFF')
    .borderRadius(20)
    .height(120)
    .padding(10)
  }
}
2）局部公共样式
// 定义商品类
class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  // discount初始化为0
  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/CommonComponent'

/*// 全局自定义构造函数
@Builder function ItemCard(item: Item) {
  Row({ space: 10 }) {
    Image(item.image)
      .width(100)
    Column({ space: 4 }) {
      // 如果有折扣 渲染只有这里有变化
      if (item.discount) {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥' + item.price)
          .fontColor('#CCC')
          .fontSize(14)
          .decoration({ type: TextDecorationType.LineThrough })
        Text('折扣价：￥' + (item.price - item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴：￥' + item.discount)
          .fontColor('#F36')
          .fontSize(18)
      } else {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥' + item.price)
          .fontColor('#F36')
          .fontSize(18)
      }
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}*/

/*// 全局公共样式
@Styles function fillScreen() {
  .width('100%')
  .height('100%')
}*/

@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('Pocket系列', $r('app.media.Pocket'), 7499, 500),
    new Item('Mate系列', $r('app.media.Mate'), 6499),
    new Item('P系列', $r('app.media.P'), 6988),
    new Item('nova系列', $r('app.media.nova'), 4699),
    new Item('畅想系列', $r('app.media.nav'), 1499),
    new Item('畅想系列', $r('app.media.nav'), 1499)
  ]

  // 局部公共样式
  @Styles fillScreen() {
    .width('100%')
    .height('100%')
  }

  build() {
    Column({ space: 8 }) {

      // 标题部分
      Header({ title: '商品列表' })
        .margin({ bottom: 20 })

      // 商品列表部分
      List({ space: 8 }) {
        ForEach(
          this.items,
          // 也可以写成item => {}，但因为传进来的item类型为any，所以没有提示，声明变量类型后就有提示了
          (item: Item) => {
            ListItem() {
              // 使用自定义构建函数
              this.ItemCard(item)
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1) // 权重配比

    }
    .fillScreen()
  }
  // 局部自定义构造函数 不加function
  @Builder ItemCard(item: Item) {
    Row({ space: 10 }) {
      Image(item.image)
        .width(100)
      Column({ space: 4 }) {
        // 如果有折扣 渲染只有这里有变化
        if (item.discount) {
          Text(item.name)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('原价：￥' + item.price)
            .fontColor('#CCC')
            .fontSize(14)
            .decoration({ type: TextDecorationType.LineThrough })
          Text('折扣价：￥' + (item.price - item.discount))
            .fontColor('#F36')
            .fontSize(18)
          Text('补贴：￥' + item.discount)
            .fontColor('#F36')
            .fontSize(18)
        } else {
          Text(item.name)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('￥' + item.price)
            .fontColor('#F36')
            .fontSize(18)
        }
      }
      .height('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .backgroundColor('#FFF')
    .borderRadius(20)
    .height(120)
    .padding(10)
  }
}

如果我们要对组件特有组件进行封装，则不能使用@Style，使用@Extend()

3）特有属性封装

@Extend不能写在组件内

// 定义商品类
class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  // discount初始化为0
  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/CommonComponent'

/*// 全局自定义构造函数
@Builder function ItemCard(item: Item) {
  Row({ space: 10 }) {
    Image(item.image)
      .width(100)
    Column({ space: 4 }) {
      // 如果有折扣 渲染只有这里有变化
      if (item.discount) {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥' + item.price)
          .fontColor('#CCC')
          .fontSize(14)
          .decoration({ type: TextDecorationType.LineThrough })
        Text('折扣价：￥' + (item.price - item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴：￥' + item.discount)
          .fontColor('#F36')
          .fontSize(18)
      } else {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥' + item.price)
          .fontColor('#F36')
          .fontSize(18)
      }
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}*/

/*// 全局公共样式
@Styles function fillScreen() {
  .width('100%')
  .height('100%')
}*/

// 继承模式，只能写在全局
@Extend(Text) function priceText() {
  .fontColor('#F36')
  .fontSize(18)

}

@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('Pocket系列', $r('app.media.Pocket'), 7499, 500),
    new Item('Mate系列', $r('app.media.Mate'), 6499),
    new Item('P系列', $r('app.media.P'), 6988),
    new Item('nova系列', $r('app.media.nova'), 4699),
    new Item('畅想系列', $r('app.media.nav'), 1499),
    new Item('畅想系列', $r('app.media.nav'), 1499)
  ]

  // 局部公共样式
  @Styles fillScreen() {
    .width('100%')
    .height('100%')
  }

  build() {
    Column({ space: 8 }) {

      // 标题部分
      Header({ title: '商品列表' })
        .margin({ bottom: 20 })

      // 商品列表部分
      List({ space: 8 }) {
        ForEach(
          this.items,
          // 也可以写成item => {}，但因为传进来的item类型为any，所以没有提示，声明变量类型后就有提示了
          (item: Item) => {
            ListItem() {
              // 使用自定义构建函数
              this.ItemCard(item)
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1) // 权重配比

    }
    .fillScreen()
  }
  // 局部自定义构造函数 不加function
  @Builder ItemCard(item: Item) {
    Row({ space: 10 }) {
      Image(item.image)
        .width(100)
      Column({ space: 4 }) {
        // 如果有折扣 渲染只有这里有变化
        if (item.discount) {
          Text(item.name)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('原价：￥' + item.price)
            .fontColor('#CCC')
            .fontSize(14)
            .decoration({ type: TextDecorationType.LineThrough })
          Text('折扣价：￥' + (item.price - item.discount))
            .priceText()
          Text('补贴：￥' + item.discount)
            .priceText()
        } else {
          Text(item.name)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text('￥' + item.price)
            .priceText()
        }
      }
      .height('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .backgroundColor('#FFF')
    .borderRadius(20)
    .height(120)
    .padding(10)
  }
}

Sweet7weight
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙HarmonyOS开发学习笔记
01-21
学习鸿蒙HarmonyOS开发，首先需要掌握其基本架构和组件。HarmonyOS开发主要使用 ArkTS 语言，这是一种基于TypeScript的编程语言，适用于构建HarmonyOS应用。 鸿蒙应用的工程结构通常包括以下几个关键部分： 1. **...
C语言学习笔记——小浪神
10-04
C语言学习笔记——小浪神 本笔记是关于C语言的学习笔记，涵盖了C语言的基本概念、历史发展、语言特点、数据类型、变量、常量、算法等方面的知识点。 计算机程序的概念 计算机程序是指一组能够被计算机识别和执行...
鸿蒙4.0开发----自定义组件
m0_71117042的博客
01-16 852
鸿蒙4.0开发----自定义组件
鸿蒙系列--自定义组件
weixin_42277946的博客
01-03 2262
鸿蒙系列--自定义组件
2024年HarmonyOS鸿蒙最全HarmonyOS 应用开发之自定义组件的自定义布局，2024年最新华为面试题答案123
2401_84871342的博客
05-13 306
以上示例中，Index页面包含一个实现了自定义布局的自定义组件，且对应自定义组件的子组件通过index页面内的builder方式传入。而在自定义组件中，调用了onMeasureSize和onPlaceChildren设置子组件大小和放置位置。例如，在本示例中，在onMeasureSize中初始化组件大小size=100，后续的每一个子组件size会加上上一个子组件大小的一半，实现组件大小递增的效果。
harmonyOS杂谈 - 自定义组件生命周期
weixin_42861217的博客
12-21 1180
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。状态变量 -> UI组件（包括ForEach和if）。
鸿蒙开发学习笔记1
weixin_51250562的博客
07-04 267
内核层(内核子统（Linux Kernel+LiteOS），驱动子系统)--->系统服务层---->框架层（用户程序框架（方舟开发框架）和Ability框架）---->应用层（FA（Feature Ability），PA（Particle Ability））OpenHarmony是一个开源项目，OpenHarmony是HarmonyOS的基石HarmonyOS不开源。鸿蒙生态：OpenHarmony和HarmonyOS...
鸿蒙基础知识-自定义组件
程序猿中的小白
02-20 4742
一.概述 在实际的开发过程中，往往系统自己自带的组件是不能满足开发需求的，需要自己按照系统的规则去定制自己的组件； 鸿蒙os中的所有的组件的基类直接或者间接Component类，像Button，text，Image等等，能容纳别的组件的组件我们一般称之为容器类组件，这类组件的基类直接或者间接是ComponentContainer，像DirectionalLayout，DependentLayout等等； 二.自定义Component组件 1.继承Component类 public class T
HarmonyOS 鸿蒙开发 学习笔记（一）
最新发布
u014105655的博客
06-19 158
鸿蒙开发学习笔记（一）
JBPM学习笔记——流程设计与控制
03-03
火龙果软件工程技术中心 相关资料：《jBPM学习笔记(V3.2环境部署)》《jBPM学习笔记(框架设计简介)》背景本片文章，我们将从业务流程的设计开始，通过带领大家完成一个完整工作流的程序设计，来学习jPDL的使用。...
Python学习笔记——大数据之SPARK核心
02-24
本文来自于csdn，文章讲解RDD的特点，RDD操作函数相关，穿插案例辣酱得段子，带大家理解MapReduce，通过哈姆雷特单词分析案例进行深度剖析。RDD（ResilientDistributedDatasets弹性分布式数据集），是spark中最重要...
HarmonyOS鸿蒙学习基础篇 - 自定义组件（一）
2303_76218115的博客
02-14 3814
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。可组合：允许开发者组合使用系统组件、及其属性和方法。可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新@Component。
鸿蒙HarmonyOS4.0开发应用学习笔记——第一篇
2201_76139143的博客
12-24 795
设计：设计的资源，需要来找开发：开发应用分发：发布文档：开发查看的资料（指南，API文档）
HarmonyOS应用开发：鸿蒙自定义组件slot插槽，体现的更强大！
08-04 980
自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素
【学习笔记】HarmonyOS 4.0 鸿蒙Next 应用开发--安装开发环境
编程小栈
05-07 1680
选择一样APP的样式，之后设置项目的名字，注意，bundle name就是发布到市场上的应用的名字，这个时候，我们取得名字不能与应用市场上的软件同名。在这里可以看到整个应用的入口是entry, 这是整个应用的主模块，整个项目中这个模块是最先被执行的。这个时候我们可以使用预览功能，或者是在我们的开发工具上安装我们的模拟器进行运行我们的应用APP。点击不同的API版本可以看到它支持的不同的语言的类型，最早的版本是支持JS 和Java的开发。这个时候会先下载需要的模拟器的SDK，完成之后就会出现下面这个画面。
鸿蒙系统开发笔记2【基于小熊派HarmonyOS】
Jonlusen
05-17 704
学习内容来自小熊bearpi,本篇内容涉及解释功能调用函数.
【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— TextInput文本输入组件
温的打怪之旅
03-17 1459
TextInput为文本输入组件，用于接收用户输入的文本内容。
鸿蒙4.0开发笔记之ArkTS语法基础@Entry@Component自定义组件的使用（九）
Viewinfinitely的博客
11-29 4495
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
鸿蒙ArkUI实例：【自定义组件】
2301_76813281的博客
04-07 1404
自定义一个组件，首先要定义好名称，尽量做到见名知意，比如定义一个标题栏组件，笔者把它命名为TitleBar，为了让系统知道这是一个组件，需要使用@Component修饰符和structbuild() {// 省略build() {// 省略struct：表示TitleBar是一个结构体，使用struct关键字必须实现build()。@Component：表示TitleBar这个结构体具有组件化的能力，也就是说它可以成为一个独立的组件。@Entry。
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值