八、ArkTS-语句-类型进阶与渲染控制 原创

//第一步通过接口定义对象
interface student{
  stuID:number,
  name:string,
  gender:string,
  age:number
}

//基于接口创建对象数组
let stuShuZu:student[]=[
  {stuID:1,name:'小明',gender:'高三',age:17},
  {stuID:1,name:'大明',gender:'高三',age:19},
  {stuID:1,name:'二明',gender:'高三',age:18},
  {stuID:1,name:'天明',gender:'高三',age:17}
]

//这是一个对象数组类型
stuShuZu
//这是一个对象类型
stuShuZu[0]

//需求:获取每一个学生的年龄, 
//看到数组每一个XXX,就要想到遍历
for (let item of stuShuZu){
  console.log('学生的姓名是',item.name)
}

@Entry
@Component
struct Index {
  //组件的状态变量
  @State count:number=1
  build() {
    Column(){

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}

//第一步通过接口定义对象
interface student{
  stuID:number,
  name:string,
  gender:string,
  age:number
}

//基于接口创建数组对象
let stuShuZu:student[]=[
  {stuID:1,name:'小明',gender:'高三',age:17},
  {stuID:1,name:'大明',gender:'高三',age:19},
  {stuID:1,name:'二明',gender:'高三',age:18},
  {stuID:1,name:'天明',gender:'高三',age:17}
]

//使用数组,  因为数组对象不能直接在日志中显示,  想要在日志中显示需要调用方法转成字符串
console.log('打印数组对象',stuShuZu)

//包含对象的复杂数据,  如果想在日志中打印,  需要需要调用一个方法,  转成字符串
//JSON.stringify(复杂类型)对象/数值
console.log('打印数组对象',JSON.stringify(stuShuZu))

//具体使用(访问->数组下标)
console.log('数组中第二位是',stuShuZu[1].name)
console.log('数组中第二位的信息',stuShuZu[1])//没有调用方法,  打印出来是Object
console.log('数组中第二位的信息',JSON.stringify(stuShuZu[1]))

//也支持遍历,  for...of和普通for
for(let item of stuShuZu){
  console.log('数组对象中的每一项',JSON.stringify(item))
}

@Entry
@Component
struct Index {
  //组件的状态变量
  @State count:number=1
  build() {
    Column(){

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}

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

@Entry
@Component
struct Index {
  
  //用装饰器定义了一个数组
  @State stu:string[]=['大明','二明','小明','天命','耳顺','随心所欲']

  build() {
    Column(){
      //ForEach渲染控制,  
      //item是形参,可以自己定义写法
      // ()=>{} 第一个 参数1 - 永远都是表示数组每一项 
      // 				第二个 参数2 - 永远都是数组下标 - 不取决于命名，只取决于位置
      ForEach(this.stu,(item:string,index)=>{
          Text(`${item},${index+1}`)
            .fontColor(Color.Green)
            .fontSize(20)
            .fontWeight(500)
            .padding(10)
      }) 
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}

//接口要定义到程序入口@Entry外
interface news{
  title:string,
  createTime:string,
}
@Entry
@Component
struct Index {
  @State articles: news[]=[
    {title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程', createTime:'2024-01-31 09-59:43'},
    {title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程', createTime:'2024-01-31 09-59:43'},
    {title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程', createTime:'2024-01-31 09-59:43'},
    {title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程', createTime:'2024-01-31 09-59:43'},
  ]
  
  build() {
    Column(){
      //ForEach渲染控制,
      ForEach(this.articles,(item:news,index)=>{
          Column(){
            Text(`${item.title}`)
              .fontColor('#000')
              .fontWeight(500)
              .padding(10)
              .width('100%')
            Text(`${item.createTime}`)
              .fontColor('#999')
              .fontSize(14)
              .fontWeight(500)
              .padding(10)
              .width('100%')
          }
      })  
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}

// 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 之间的随机数
console.log('Math对象', Math.random() * 11)

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

//计算n-m的随机数
let n:number=1
let m:number=10
console.log('n-m的随机数',Math.floor(Math.random()*(m-n+1))+1);

//这种写法0是取不到的, 或者取到0的概率极小
console.log('随机数',Math.ceil(Math.random()*2));