ArkUI基础篇-组件事件

按钮的点击，移动，文本框内容的改变等等，都叫事件，一旦有事件，那么就可能需要处理

一、事件操作

ArkTs语言中，事件处理的模型

• 对象.事件类型（回调函数），回调函数我们自己定义的，当系统发生事件后会调用函数

1.1 外部定义回调函数

外部编写回调函数可以增加代码的整洁行

但是缺点也很明显：

• 不能在外部操作组件的数据
• 若想传递参数不能直接将回调方法作为事件的参数进行传递

最后只有事件3是成功改变值的

/*
 * 事件处理界面
 * */

@Entry
@Component
struct ArkUIPage {
  @State message: string = 'Hello World';

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(40)
      // Button("点击事件").onClick(回调函数)
      Button("点击事件1")
        .onClick(clickFn1)
      Button("点击事件2")
        .onClick(() => {
          clickFn2(this.message)
        })
      Button("点击事件3")
        .onClick(() => {
          this.message = clickFn3(this.message)
        })
    }
    .height('100%')
    .width('100%')
  }
}

/*
 * 外部定义回调函数
 * 不好使用this直接调用做键内部的参数
 * 所以不能访问结构体内部的数据
 * */

function clickFn1() {
  console.log("this is clickFn1")
}

function clickFn2(msg: string) {
  msg = "123"
  console.log("this is clickFn2", msg)
}

function clickFn3(msg: string) {
  msg = "123"
  console.log("this is clickFn3")
  return "123"
}

1.2 内部定义回调函数

• clickFn内部定义的函数不能直接作为事件的参数，因为在一般函数中，this指向的是调用者，如果以这种形式依旧使用this会报错
• clickFn2内部定义的函数不能直接作为事件的参数，箭头函数本身是没有this的，this会指向上一级，所以clickFn2的this指向的是组件本身

/*
 * 事件处理界面
 * */

@Entry
@Component
struct ArkUIPage {
  @State message: string = 'Hello World';

  // 内部定义的函数不能直接作为事件的参数，因为在一般函数中，this指向的是调用者
  clickFn() {
    console.log("this is inner clickFn1")
    console.log("this = ", this)
    this.message = "inner"
  }
  // 内部定义的函数不能直接作为事件的参数，箭头函数本身是没有this的，this会指向上一级，所以clickFn2的this指向的是组件本身
  clickFn2 = () => {
    console.log("this is inner clickFn2")
    console.log("this = ", this)
    this.message = "inner"
  }

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(40)
      // Button("点击事件").onClick(回调函数)
      Button("内部点击事件1")
        .onClick(this.clickFn)
      Button("内部点击事件2")
        .onClick(this.clickFn2)
    }
    .height('100%')
    .width('100%')
  }
}

clickFn不能直接作为参数的原因是，他只是个被调用的参数，被接收到会以fn（fn是示例名），理解为fn接收参数fn=this.clickFn，最后是被直接调用的方式是fn()并没有触发者，因此是没有this，所以直接作为参数的话，内部的this是undefined，因此需要

Button("内部点击事件1调整")
  .onClick(() => {
    console.log("这是变换调用的clickFn")
    this.clickFn()
  })

这样就是this调用的clickFn，所以内部的this是外部的调用者this

而箭头函数形式的回调参数，this是指向上一级的，因此内部即便没有通过this.fn()调用也会指向上层的this

一、List

列表组件

结构:

@Entry
@Component
struct ListPage {

  build() {
    List() {
      ListItem() {
        Text("子组件")
      }
      ListItem()
      ListItem()
      ListItem()
    }
    .height('100%')
    .width('100%')
  }
}

• 列表中的内容一般是相似的，因此我们可以利用ForEach来进行渲染，减少代码量
• 当数据量过大时，我们就需要需要使用LazyForEach来提升效率，增加用户体验

ForEach(数据源, 组件生成函数, 键值生成函数) 键值生成函数是一个回调函数，用于生成唯一的key；若不写，系统会帮我们生成独一无二的key，这个参数，宁可不给也不要随意添加，不恰当会影响运行效率

interface testListData {
  name: string
  age: number
}


@Entry
@Component
struct ListPage {
  @State data: testListData[] = [
    { name: "a", age: 12 },
    { name: "b", age: 13 },
    { name: "c", age: 14 },
    { name: "d", age: 15 },
    { name: "e", age: 16 },
  ]

  build() {
    List({ space: 5 }) {
      ForEach(this.data, (item: testListData, idx: number) => {
        ListItem() {
          Column() {
            Row() {
              Text(item.name).fontSize(30)
              Blank()
              Text(item.age + "").fontSize(30)
            }
            .width('100%')

            Divider().strokeWidth(2)
          }
          .width('100%')
        }
      }, (item: testListData, idx) => idx + "")
    }
    .height('100%')
    .width('100%')
  }
}

二、Tabs

类似于微信底部的切换栏

切换栏默认是在顶部的，可以通过Tabs({barPosition: BarPosition.End})设置栏的位置为底部

通过设置controller: this.barController给tabs设置控制器，方便后续的手动设置操作

.barMode(BarMode.Scrollable)// 滚动

@Entry
@Component
struct TabsPage {
  build() {
    Column() {
      TabsComponents()
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct TabsComponents {
  @State currentIdx: number = 0
  barController: TabsController = new TabsController()

  @Builder
  Bar(tabBarName: string, idx: number) {
    Text(tabBarName).fontSize(20)
      .fontColor(this.currentIdx === idx ? Color.Red : Color.Black)
      .onClick(() => {
        this.currentIdx = idx
        this.barController.changeIndex(this.currentIdx)
      })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.barController }) {
        TabContent() {
          Text("界面1").fontSize(60)
        }
        .tabBar(this.Bar("界面1", 0))
        TabContent() {
          Text("界面2").fontSize(60)
        }
        .tabBar(this.Bar("界面2", 1))
        TabContent() {
          Text("界面3").fontSize(60)
        }
        .tabBar(this.Bar("界面3", 2))
      }
    }
  }
}

• 绑定的目标页数一定要绑定@State装饰器，否则只切换无效果@State currentIdx: number = 0

• 缺失@State