鸿蒙Harmony(七)ArkUI--循环foreach&List组件&自定义组件

循环foreach

javascript 复制代码
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)
  }
}

List列表

List列表使用格式

javascript 复制代码
   List({ space: 20 }) {
          ForEach(this.data, (item: any, index: number) => {
            ListItem() {
              // 列表内容只能包含一个根组件
            }
          }
        }
javascript 复制代码
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)
  }
}

自定义组件

自定义组件:

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

方式一:自定义组件

javascript 复制代码
@Component
struct GoodsItemComponent {
  build() {

  }
}

代码示例

javascript 复制代码
@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")
  }
}

自定义组件的使用

javascript 复制代码
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)
  }
}

方式二:自定义构建函数

全局自定义构建函数

javascript 复制代码
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)
  }
}

局部自定义构建函数

不加function

javascript 复制代码
@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")
  }
}

自定义样式

全局公共样式

javascript 复制代码
@Styles function fillScreen() {
  .width('100%')
  .height('100%')
  .backgroundColor("#eeeeee")
}

局部公共样式

javascript 复制代码
@Styles fillScreen() {
    .width('100%')
    .height('100%')
    .backgroundColor("#eeeeee")
  }

特定组件全局公共样式

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

javascript 复制代码
// 继承模式,只能在在全局,不能写在组件内部
@Extend(Text) function nameFontStyle() {
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
  .fontColor('#35D')
  .fontStyle(FontStyle.Italic)
}
相关推荐
drebander1 小时前
使用 Java Stream 优雅实现List 转化为Map<key,Map<key,value>>
java·python·list
Andy醒4 小时前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
A_cot5 小时前
理解设计模式与 UML 类图:构建稳健软件架构的基石
microsoft·设计模式·简单工厂模式·工厂方法模式·uml
系统之家装机大师8 小时前
Win11 22H2/23H2系统11月可选更新KB5046732发布!
windows·电脑
系统之家装机大师8 小时前
微软发布Win11 24H2系统11月可选更新KB5046740!
windows·电脑
C-cat.8 小时前
Linux|进程程序替换
linux·服务器·microsoft
熬夜学编程的小王9 小时前
【C++篇】深度解析 C++ List 容器:底层设计与实现揭秘
开发语言·数据结构·c++·stl·list
戎梓漩10 小时前
windows下安装curl,并集成到visual studio
ide·windows·visual studio
Smartdaili China11 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
蓝田~12 小时前
观察者模式和订阅模式
windows·观察者模式