鸿蒙基础篇-ArkTS-语句-类型进阶与渲染控制

“在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。”

各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,

鸿蒙基础篇-ArkTS-语句-类型进阶与渲染控制

对象进阶

定义对象数组

要定义一个对象，首先我们需要定义一个接口，然后根据接口定义对象数组。

// 1. 定义接口
interface Person {
  stuId: number
  name: string
  gender: string
  age: number
}

// 2. 根据接口定义对象数组
let students: Person[] = [
  {stuId: 1, name: '小红', gender: '女', age: 18},
  {stuId: 2, name: '小明', gender: '男', age: 19},
  {stuId: 3, name: '大强', gender: '男', age: 18}
]

使用对象数组

• 访问某一个对象:

• • 每一对象在数组中都是有对应的下标的, 可以通过 数组名[下标] 访问

• 访问某一对象的某一个属性

• • 先找到要访问的对象, 在该对象的属性访问属性 数组名[下标].属性名 访问

• 依次访问每一个对象

• • for ... of 进行访问即可

// 3. 访问属性 数组名[下标].属性名
console.log('小红的年龄是', students[0].age)

// 4. 遍历对象数组
for (const item of students) {
  console.log('学生姓名是', item.name)
}

渲染控制 - ForEach

当我们页面中的区域中有多个样式相同的小区域,只有内容数据不一样的时候, 为了提升代码的复用率,不需要一个一个的编写UI组件,我们可以将所有的数据整合成一个数组, 并采取ForEach进行循环渲染.如下图区域。

而使用ForEach语法进行渲染，就能简单而方便的渲染数据。

ForEach语法

ForEach基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。

• 语法: ForEach(arr, (item, index) => {})

ForEach使用优化代码

原始代码

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text('唱')
          .fontSize(30)
          .fontColor(Color.Red)
          .fontWeight(700)
          .width('100%')
          .padding(15)
      }
      Row() {
        Text('跳')
          .fontSize(30)
          .fontColor(Color.Red)
          .fontWeight(700)
          .width('100%')
          .padding(15)
      }
      Row() {
        Text('rap')
          .fontSize(30)
          .fontColor(Color.Red)
          .fontWeight(700)
          .width('100%')
          .padding(15)
      }
      Row() {
        Text('篮球')
          .fontSize(30)
          .fontColor(Color.Red)
          .fontWeight(700)
          .width('100%')
          .padding(15)
      }
      Row() {
        Text('music')
          .fontSize(30)
          .fontColor(Color.Red)
          .fontWeight(700)
          .width('100%')
          .padding(15)
      }
      Row() {
        Text('🏀')
          .fontSize(30)
          .fontColor(Color.Red)
          .fontWeight(700)
          .width('100%')
          .padding(15)
      }
    }
  }
}

优化代码

@Entry
@Component
struct Index {
  item: string[] = ['唱', '跳', 'rap', '篮球', '🏀']

  build() {
    Column() {
      Column() {
        ForEach(this.item, (item: string) => {
          Text(item)
            .fontSize(30)
            .fontColor(Color.Red)
            .fontWeight(700)
            .width('100%')
            .padding(15)
        })
      }
    }
  }
}

是不是很简约

接下来，让我们做个案例

案例-菜单点餐

模板代码

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text(`菜名：凉拌白菜 价格：18`)
          .fontSize(18)
          .fontColor('#fff')
        Button('点单+1')
          .backgroundColor('##007dfe')
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Blue)
      .borderRadius(5)
      .padding({ left: 10, right: 10 })
      .margin({ bottom: 10 })
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .padding(20)
  }
}

实现思路

• 准备数据

• 定义数组元素接口、
• 根据接口创建对象数组保存数据
• ForEach循环渲染
• 使用数组元素的属性(item.属性名)动态填充UI组件对应的位置

实现结果

interface IData {
  name: string;
  price: number;
  count: number;
}

@Entry
@Component
struct Index {
  @State idata: IData[] = [
    {
      name: '凉拌菜',
      price: 18,
      count: 1
    },
    {
      name: '炒河粉',
      price: 15,
      count: 1
    },
    {
      name: '炒米粉',
      price: 15,
      count: 2
    }
  ]

  build() {
    Column() {
      ForEach(this.idata, (item: IData, index) => {
        Row() {
          Text(`菜名：${item.name} 价格：${item.price}`)
            .fontSize(18)
            .fontColor('#fff')
          Button(`点了${item.count}份`)
            .backgroundColor('##007dfe')
            .onClick(() => {
              console.log(`点了${item.count}份`)
              this.idata[index] = {
                name: item.name,
                price: item.price,
                count: item.count += 1
              }
            })
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Blue)
        .borderRadius(5)
        .padding({ left: 10, right: 10 })
        .margin({ bottom: 10 })
        .justifyContent(FlexAlign.SpaceBetween)
      })
    }
    .padding(20)
  }
}

注意，如果直接使用: item.count+=1 无法直接实现页面的数据修改，因为@State装饰器无法监听到深层数据的变化，即可以监听到数组的变化，无法监听到数组内的对象的变化。

所以我们要通过修改数组的方式让编译器识别到数据的变化。

Math对象

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法, Math 用于 Number 类型数据的处理.

测试

// 1. 随机数
console.log('Math对象', Math.random())  // 0-1 之间的随机小数

// 2. 向上取整
console.log('Math对象', Math.ceil(1.1))  // 2
console.log('Math对象', Math.ceil(1.9))  // 2

// 3. 向下取整
console.log('Math对象', Math.floor(1.1))  // 1
console.log('Math对象', Math.floor(1.9))  // 1

求0--10之间的随机整数

// 0-10 之间的随机数
console.log('Math对象', Math.random() * 11)

// 0-10 之间的随机 整数
console.log('Math对象', Math.floor(Math.random() * 11))

以上是关于鸿蒙基础篇-ArkTS-语句-类型进阶与渲染控制 的一些内容,方便大家学习,至此，关于鸿蒙基础篇-ArkTS-语句-类型进阶与渲染控制 的内容就介绍到这里，愿您能学以致用，开发出精彩的鸿蒙应用！

以上内容仅供学习交流，如有违法或者侵权可以联系删除。