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

最新推荐文章于 2024-05-15 05:54:46 发布
最新推荐文章于 2024-05-15 05:54:46 发布
阅读量763 收藏 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
    评论
专栏目录
鸿蒙4.0开发----自定义组件
m0_71117042的博客
01-16 836
鸿蒙4.0开发----自定义组件
鸿蒙系列--自定义组件
weixin_42277946的博客
01-03 2194
鸿蒙系列--自定义组件
2024年鸿蒙最全ArkUI中自定义组件的生命周期_arkui 生命周期，app启动界面设计
最新发布
2401_84850938的博客
05-15 1050
在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。也就是说，对于一些内部组件来说，并没有刚刚@Entry修饰器的返回、显示、隐藏之类的，所以我们在显示组件的时候，就只有以下两个生命周期：当组件已经被实例化，但是还没显示在页面上的时候。aboutToAppear会被调用。当组件即将被销毁的时候，aboutToDisappear会被调用。而@Entry修饰的页面，则会含有上述的五个生命周期，即下面的图。
鸿蒙harmony--自定义组件
袁震的博客
02-01 1629
今天是2月1日，星期四，二月的第一条祝福送给你，愿你目之所及皆是欢喜，心之所想皆能如愿，希望在新的一年里，我们都能越来越好。
HarmonyOS鸿蒙学习基础篇 - 自定义组件（一）
2303_76218115的博客
02-14 3754
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。可组合：允许开发者组合使用系统组件、及其属性和方法。可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新@Component。
鸿蒙4.0开发笔记之ArkTS语法基础@Entry@Component自定义组件的使用（九）
Viewinfinitely的博客
11-29 4319
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
HarmonyOS应用开发：鸿蒙自定义组件slot插槽，体现的更强大！
08-04 974
自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素
鸿蒙HarmonyOS开发学习笔记
01-21
学习鸿蒙HarmonyOS开发，首先需要掌握其基本架构和组件。HarmonyOS开发主要使用 ArkTS 语言，这是一种基于TypeScript的编程语言，适用于构建HarmonyOS应用。 鸿蒙应用的工程结构通常包括以下几个关键部分： 1. **...
C语言学习笔记——小浪神
10-04
C语言学习笔记——小浪神 本笔记是关于C语言的学习笔记，涵盖了C语言的基本概念、历史发展、语言特点、数据类型、变量、常量、算法等方面的知识点。 计算机程序的概念 计算机程序是指一组能够被计算机识别和执行...
Python学习笔记——大数据之SPARK核心
01-27
【Python学习笔记——大数据之SPARK核心】 Spark作为大数据处理框架的核心在于其Resilient Distributed Datasets（RDD），这是一种弹性分布式数据集。RDD是Spark设计的基石，它将大量数据分布在多台机器上，可以...
JBPM学习笔记——流程设计与控制
03-03
火龙果软件工程技术中心 相关资料：《jBPM学习笔记(V3.2环境部署)》《jBPM学习笔记(框架设计简介)》背景本片文章，我们将从业务流程的设计开始，通过带领大家完成一个完整工作流的程序设计，来学习jPDL的使用。...
鸿蒙ArkTS/ArkUI-自定义组件、页面的生命周期和数据传递
qq_38690457的博客
12-26 2033
1.自定义组件和页面的关系2.页面生命周期3.组件生命周期4.具体事例分析生命周期4.1 页面4.1 页面+自定义组件的生命周期自定义组件页面@Comonent 装饰的UI单元，可以组合多个系统组件实现UI的复用。即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。相关全部代码进入页面有自定义组件点击销毁自定义组件。
鸿蒙HarmonyOS实战-ArkTS语言（基本语法）
shudaoshanQAQ的博客
01-04 2071
Componentbuild() {// HelloComponent自定义组件组合系统组件Row和TextRow() {// 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!Divider()HelloComponent({ message: '你好!' });
鸿蒙基础知识-自定义组件
程序猿中的小白
02-20 4738
一.概述 在实际的开发过程中，往往系统自己自带的组件是不能满足开发需求的，需要自己按照系统的规则去定制自己的组件； 鸿蒙os中的所有的组件的基类直接或者间接Component类，像Button，text，Image等等，能容纳别的组件的组件我们一般称之为容器类组件，这类组件的基类直接或者间接是ComponentContainer，像DirectionalLayout，DependentLayout等等； 二.自定义Component组件 1.继承Component类 public class T
HarmonyOS 应用开发之自定义组件的自定义布局
maniuT的博客
04-02 500
例如，在本示例中，在onMeasureSize中初始化组件大小size=100，后续的每一个子组件size会加上上一个子组件大小的一半，实现组件大小递增的效果。而在onPlaceChildren中，定义startPos=300，设置每一个子组件的位置为startPos减去子组件自身的高度，所有子组件右下角一致在顶点位置(300,300)，实现一个从右下角开始展示组件的类Stack组件。4.鸿蒙开发系统底层方向。1.项目开发必备面试题。5.鸿蒙音视频开发方向。6.鸿蒙车载开发方向。7.鸿蒙南向开发方向。
【小白学鸿蒙-学习笔记】关于鸿蒙的一点吐槽与近期学习的体会
csdndevpress0028的博客
06-09 2138
对于这块内容，我是站在一个新手的角度得出的内容，如有不对的内容，请指正。
HarmonyOS（四）—— 如何创建自定义组件
hirezy
11-23 1448
HarmonyOS创建自定义组件
HarmonyOS鸿蒙学习基础篇 - 自定义组件（一）_鸿蒙系统学习 csdn(1)
tencentes的博客
04-11 1187
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：状态变量 -> UI组件（包括ForEach和if）。
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 二）
爱吃土豆丝的打工人的博客
07-14 4640
struct：自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。说明自定义组件名、类名、函数名不能和系统组件名相同。@Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。说明。
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、付费专栏及课程。

余额充值