devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙Harmony（七）ArkUI--循环foreach&List组件&自定义组件_arkui foreach

作者：繁依Fanyi0 | 2024-03-21 06:28:31

赞

踩

arkui foreach

循环foreach

在这里插入图片描述

import Prompt from '@system.prompt'

class Item {
  icon: Resource
  name: string
  price: number

  constructor(icon: Resource, name: string, price: number) {
    this.icon = icon
    this.name = name
    this.price = price
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150
  private data: Array<Item> = [
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 }]

  build() {
    Column({ space: 20 }) {
      Text("展示列表")
        .fontColor("#38D")
        .fontSize(25)
        .margin({ top: 20, left: 20 })
      ForEach(this.data, (item: any, index: number) => {
        Row() {
          Image(item.icon)
            .width(80)
            .height(80)
            .borderRadius(40) //圆角
            .interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）
            .margin({ left: 30 })
          Column({ space: 5 }) {
            Text(item.name)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .fontColor('#35D')
              .fontStyle(FontStyle.Italic)
            Text(item.price.toString())
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .fontColor('#35D')
              .fontStyle(FontStyle.Italic)
          }.width("100%")
        }.width("100%")
        .height(120)
        .backgroundColor("#ffffff")
      })
    }
    .height('100%')
    .backgroundColor("#eeeeee")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

List列表

List列表使用格式

   List({ space: 20 }) {
          ForEach(this.data, (item: any, index: number) => {
            ListItem() {
              // 列表内容只能包含一个根组件
            }
          }
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
import Prompt from '@system.prompt'

class Item {
  icon: Resource
  name: string
  price: number

  constructor(icon: Resource, name: string, price: number) {
    this.icon = icon
    this.name = name
    this.price = price
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150
  private data: Array<Item> = [
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 },
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 }]

  build() {
    Column({ space: 20 }) {
      Text("展示列表")
        .fontColor("#38D")
        .fontSize(25)
        .margin({ top: 20, left: 20 })

      List({ space: 20 }) {
        ForEach(this.data, (item: any, index: number) => {
          ListItem() {
            Row() {
              Image(item.icon)
                .width(80)
                .height(80)
                .borderRadius(40) //圆角
                .interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）
                .margin({ left: 30 })
              Column({ space: 5 }) {
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                  .fontColor('#35D')
                  .fontStyle(FontStyle.Italic)
                Text(item.price.toString())
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                  .fontColor('#35D')
                  .fontStyle(FontStyle.Italic)
              }.width("100%")
            }.width("100%")
            .height(120)
            .backgroundColor("#ffffff")
          }
        })
      }
    }
    .height('100%')
    .backgroundColor("#eeeeee")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

自定义组件

自定义组件：

  • 创建自定义组件 @Component
  • @Builder
  • @Style：仅可封装组件通用属性
  • @Extend：仅可定义在全局，可以设置组件的特有属性

方式一：自定义组件

@Component
struct GoodsItemComponent {
  build() {

  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

代码示例

@Component
export struct GoodsItemComponent {
  private icon: Resource = $r('app.media.app_icon')
  private name: string = "苹果"
  private price: number = 13

  build() {
    Row() {
      Image(this.icon)
        .width(80)
        .height(80)
        .borderRadius(40) //圆角
        .interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）
        .margin({ left: 30 })
      Column({ space: 5 }) {
        Text(this.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#35D')
          .fontStyle(FontStyle.Italic)
        Text(this.price.toString())
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#35D')
          .fontStyle(FontStyle.Italic)
      }.width("100%")
    }.width("100%")
    .height(120)
    .backgroundColor("#ffffff")
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

自定义组件的使用

import Prompt from '@system.prompt'
import { GoodsItemComponent } from './GoodsItemComponent'

export class Item {
  icon: Resource
  name: string
  price: number

  constructor(icon: Resource, name: string, price: number) {
    this.icon = icon
    this.name = name
    this.price = price
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150
  private data: Array<Item> = [
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 },
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 }]

  build() {
    Column({ space: 20 }) {
      Text("展示列表")
        .fontColor("#38D")
        .fontSize(25)
        .margin({ top: 20, left: 20 })

      List({ space: 20 }) {
        ForEach(this.data, (item: any, index: number) => {
          ListItem() {
            GoodsItemComponent({ icon: item.icon, name: item.name, price: item.price })
          }
        })
      }
    }
    .height('100%')
    .backgroundColor("#eeeeee")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

方式二：自定义构建函数

全局自定义构建函数

import Prompt from '@system.prompt'
import { GoodsItemComponent } from './GoodsItemComponent'

export class Item {
  icon: Resource
  name: string
  price: number

  constructor(icon: Resource, name: string, price: number) {
    this.icon = icon
    this.name = name
    this.price = price
  }
}
// 全局自定义构建函数
@Builder function GoodsItem(item: Item) {
  Row() {
    Image(item.icon)
      .width(80)
      .height(80)
      .borderRadius(40) //圆角
      .interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）
      .margin({ left: 30 })
    Column({ space: 5 }) {
      Text(item.name)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#35D')
        .fontStyle(FontStyle.Italic)
      Text(item.price.toString())
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#35D')
        .fontStyle(FontStyle.Italic)
    }.width("100%")
  }.width("100%")
  .height(120)
  .backgroundColor("#ffffff")
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150
  private data: Array<Item> = [
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 },
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 }]

  build() {
    Column({ space: 20 }) {
      Text("展示列表")
        .fontColor("#38D")
        .fontSize(25)
        .margin({ top: 20, left: 20 })

      List({ space: 20 }) {
        ForEach(this.data, (item: any, index: number) => {
          ListItem() {
            GoodsItem(item)
          }
        })
      }
    }
    .height('100%')
    .backgroundColor("#eeeeee")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76

局部自定义构建函数

不加function

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150
  private data: Array<Item> = [
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 },
    { icon: $r('app.media.apple'), name: '苹果', price: 4.5 },
    { icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },
    { icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },
    { icon: $r('app.media.icon'), name: '葡萄', price: 20 }]

  build() {
    Column({ space: 20 }) {
      Text("展示列表")
        .fontColor("#38D")
        .fontSize(25)
        .margin({ top: 20, left: 20 })

      List({ space: 20 }) {
        ForEach(this.data, (item: any, index: number) => {
          ListItem() {
            // 使用this进行调用
            this.GoodsItem(item)
          }
        })
      }
    }
    .height('100%')
    .backgroundColor("#eeeeee")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }

  // 局部自定义构建函数 不加function
  @Builder GoodsItem(item: Item) {
    Row() {
      Image(item.icon)
        .width(80)
        .height(80)
        .borderRadius(40) //圆角
        .interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）
        .margin({ left: 30 })
      Column({ space: 5 }) {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#35D')
          .fontStyle(FontStyle.Italic)
        Text(item.price.toString())
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#35D')
          .fontStyle(FontStyle.Italic)
      }.width("100%")
    }.width("100%")
    .height(120)
    .backgroundColor("#ffffff")
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

自定义样式

全局公共样式

@Styles function fillScreen() {
  .width('100%')
  .height('100%')
  .backgroundColor("#eeeeee")
}

  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述

局部公共样式

@Styles fillScreen() {
    .width('100%')
    .height('100%')
    .backgroundColor("#eeeeee")
  }

  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述

特定组件全局公共样式

使用@Extend，这种方式只能写在全局，不能写在组件内部

// 继承模式，只能在在全局，不能写在组件内部
@Extend(Text) function nameFontStyle() {
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
  .fontColor('#35D')
  .fontStyle(FontStyle.Italic)
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/279082
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号