ArkTs的入门到入土 （2）

ArkTS-语句-类型进阶与渲染控制

1.对象进阶

1.1 定义对象数组

// 1. 定义接口
interface  Person {
    stuID：number
    name:string
    gender:string
    age:number
}
//定义对象数组
let students：string[] [
    {stuID:1,name:'小王八',gender:'男',age:18},
    {stuID:1,name:'中王八',gender:'男',age:18},
    {stuID:1,name:'大王八',gender:'男',age:18}
]

1.2 使用对象数组

• 访问某一个对象:

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

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

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

• 依次访问每一个对象

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

// 3.访问属性 数组名[下标].属性名
console.log('大王八的年龄是',student[2].age)
// 遍历对象数组
for (const item of ) {
     console.log('学生的名字是',item.name)
     }

2.渲染控制-ForEach

当我们页面中的区域中有多个样式相同的小区域,只有内容数据不一样的时候, 为了提升代码的复用率,不需要一个一个的编写UI组件,我们可以将所有的数据整合成一个数组, 并采取ForEach进行循环渲染.如下图区域,如果我们分别实现每个栏目,代码太过于冗余,这时就可以使用ForEach进行渲染了

2.1 ForEach语法

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

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

参数	参数类型	是否必须	参数说明
arr	Array	是	数据源, 根据该数组生成对应的UI组件渲染到页面中:可以为空数组
UI组件生成函数	(item: any, index?: number) => void	是	UI组件生成函数--为数组中的每个元素创建对应的组件--item: 代表每一个数组元素, 类型与数组元素保持一致,不可以省略--index: 代表每一个数组元素的下标,可以省略

2.2 ForEach优化

@Entry
@Component
struct Index {
  @State
  titles:string[] = ['电子产品', '精品服饰', '母婴产品', '影音娱乐', '海外旅游']
​
  build() {
    Column() {
      ForEach(this.titles, (item: string, index: number) => {
        Text(item)
          .fontSize('24')
          .fontWeight(700)
          .fontColor(Color.Orange)
          .width('100%')
          .padding(15)
      })
    }
  }
}

3.Math对象

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

对象方法	是否需要参数	方法描述
Math.random()	否	随机数取值范围 [0, 1)之间的随机小数,左闭右开, 可以取到0,但是取不到1
Math.ceil()	是	需要一个数字形参数总是向上取整
Math.floor()	是	需要一个数字形参数总是向下取整

• 代码测试

// 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))
​
// 4-12 之间的随机 整数
// Math.floor(Math.random() * (差值 + 1) + 最小值)
console.log('Math对象', Math.floor(Math.random() * 9 + 4))

角标标签

Badge(配参数调整角标){被角标压住的内容}

Badge({
    // value 视角标的内容
    value: '1'
    //style 是角标的样式
    style: {badgeSize:16,badgeColor:'#fa2a2d',fontSize:16}
}) {}

今天的知识点就到这里啦，明天再见