EventTarget8+对象说明

三、触摸事件

 触摸事件是指在用户与触摸屏交互时发生的一系列事件

TouchEvent对象说明

TouchObject对象说明

示例

// 使用 @Entry 装饰器表示这个组件是整个应用的主入口  
// 使用 @Component 装饰器表示这个组件是 Flutter 应用的一部分  
@Entry  
@Component  
struct TouchExample {  // 定义一个名为 text 的状态变量，类型为 string，初始值为空字符串  @State  text: string = ''  // 定义一个名为 eventType 的状态变量，类型为 string，初始值为空字符串  @State  eventType: string = ''  // build 方法是一个特殊的方法，在 Flutter 中用于构建和渲染组件  build() {  // Column 是一个垂直布局容器，用于放置其他组件  Column() {  // 第一个 Button 组件，高度为 40，宽度为 100  Button('Touch').height(40).width(100)  // .onTouch 方法定义了当 Button 被触摸时触发的动作  .onTouch((event: TouchEvent) => {  // 根据触摸事件类型更新 eventType 状态变量  if (event.type === TouchType.Down) {  this.eventType = 'Down'  } else if (event.type === TouchType.Up) {  this.eventType = 'Up'  } else if (event.type === TouchType.Move) {  this.eventType = 'Move'  }  // 更新 text 状态变量，显示触摸事件的详细信息  this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '  + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('  + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'  + event.target.area.width + '\nheight:' + event.target.area.height  })  // 第二个 Button 组件，高度为 50，宽度为 200，外边距为 20  Button('Touch').height(50).width(200).margin(20)  // 与第一个 Button 组件的触摸事件处理相同  .onTouch((event: TouchEvent) => {  if (event.type === TouchType.Down) {  this.eventType = 'Down'  } else if (event.type === TouchType.Up) {  this.eventType = 'Up'  } else if (event.type === TouchType.Move) {  this.eventType = 'Move'  }  this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '  + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('  + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'  + event.target.area.width + '\nheight:' + event.target.area.height  })  // Text 组件显示 text 状态变量的值，即触摸事件的详细信息  Text(this.text)  // 设置 Column 的宽度为 '100%'，设置内边距为 30（用于增加布局间距）  }.width('100%').padding(30)  } // build 方法结束，表示组件构建完成  
} // TouchExample 结构体定义结束

四、挂载卸载事件

     挂载卸载事件指组件从组件树上挂载、卸载时触发的事件。

事件

示例 

// 导入ohos的promptAction模块，用于显示提示信息  
import promptAction from '@ohos.promptAction';  // 使用@Entry装饰器表示这个组件是整个应用的主入口  
// 使用@Component装饰器表示这个组件是Flutter应用的一部分  
@Entry  
@Component  
struct AppearExample {  // 定义一个名为isShow的状态变量，类型为boolean，初始值为true  @State  isShow: boolean = true;  // 定义一个名为changeAppear的状态变量，类型为string，初始值为'点我卸载挂载组件'  @State  changeAppear: string = '点我卸载挂载组件';  // 定义一个私有变量myText，类型为string，初始值为'Text for onAppear'  private myText: string = 'Text for onAppear';  // build方法是一个特殊的方法，在Flutter中用于构建和渲染组件  build() {  // 创建一个Column垂直布局容器，用于放置其他组件  Column() {  // 创建一个Button组件，显示changeAppear变量的值  // 当点击这个按钮时，将触发onClick函数，切换isShow的值  Button(this.changeAppear)  .onClick(() => {  this.isShow = !this.isShow;  })  .margin(15); // 设置按钮的外边距为15  // 如果isShow为true，即显示下面的Text组件  if (this.isShow) {  // 创建一个Text组件，显示myText变量的值，字体大小为26，加粗  Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)  // 当这个Text组件首次显示时，触发onAppear函数，显示提示信息'The text is shown'  .onAppear(() => {  promptAction.showToast({  message: 'The text is shown',  duration: 2000 // 提示信息的显示时间为2000毫秒（2秒）  });  })  // 当这个Text组件被隐藏时，触发onDisAppear函数，显示提示信息'The text is hidden'  .onDisAppear(() => {  promptAction.showToast({  message: 'The text is hidden',  duration: 2000 // 提示信息的显示时间为2000毫秒（2秒）  });  });  } // if条件结束  } // Column组件结束  // 设置padding为30，设置宽度为100%，即占据整个屏幕宽度  .padding(30).width('100%');   } // build方法结束，表示组件构建完成  
} // AppearExample结构体定义结束

五、拖拽事件

   拖拽事件指组件被长按后拖拽时触发的事件。

事件

extraParams说明

用于返回组件在拖拽中需要用到的额外信息。

extraParams是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。

DragEvent说明

示例

// xxx.ets
@Extend(Text) function textStyle () {.width('25%').height(35).fontSize(16).textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
}@Entry
@Component
struct DragExample {@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']@State text: string = ''@State bool: boolean = true@State eventType: string = ''@State appleVisible: Visibility = Visibility.Visible@State orangeVisible: Visibility = Visibility.Visible@State bananaVisible: Visibility = Visibility.Visibleprivate dragList: string[] = ['apple', 'orange', 'banana']@State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible]@State idx: number = 0// 自定义拖拽过程中显示的内容@Builder pixelMapBuilder() {Column() {Text(this.text).width('50%').height(60).fontSize(16).borderRadius(10).textAlign(TextAlign.Center).backgroundColor(Color.Yellow)}}build() {Column() {Text('There are three Text elements here').fontSize(12).fontColor(0xCCCCCC).width('90%').textAlign(TextAlign.Start).margin(5)Row({ space: 15 }) {ForEach(this.dragList, (item, index) => {Text(item).textStyle().visibility(this.fruitVisible[index]).onDragStart(() => {this.bool = truethis.text = itemthis.fruitVisible[index] = Visibility.Nonereturn this.pixelMapBuilder}).onTouch((event: TouchEvent) => {if (event.type === TouchType.Down) {this.eventType = 'Down'this.idx = index}if (event.type === TouchType.Up) {this.eventType = 'Up'if (this.bool) {this.fruitVisible[index] = Visibility.Visible}}})})}.padding({ top: 10, bottom: 10 }).margin(10)Text('This is a List element').fontSize(12).fontColor(0xCCCCCC).width('90%').textAlign(TextAlign.Start).margin(15)List({ space: 20 }) {ForEach(this.numbers, (item) => {ListItem() {Text(item).width('100%').height(80).fontSize(16).borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)}}, item => item)}.editMode(true).height('50%').width('90%').border({ width: 1 }).padding(15).divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }).onDragEnter((event: DragEvent, extraParams: string) => {console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())}).onDragMove((event: DragEvent, extraParams: string) => {console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())}).onDragLeave((event: DragEvent, extraParams: string) => {console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())}).onDrop((event: DragEvent, extraParams: string) => {let jsonString = JSON.parse(extraParams);if (this.bool) {// 通过splice方法插入元素this.numbers.splice(jsonString.insertIndex, 0, this.text)this.bool = false}this.fruitVisible[this.idx] = Visibility.None})}.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })}
}

六、按键事件

    按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可获焦组件，例如Button。对于Text，Image等默认不可获焦的组件，可以设置focusable属性为true后使用按键事件。

事件

 示例

@Entry  
@Component  
struct KeyEventExample {  // 定义一个名为text的状态变量，类型为string，初始值为空字符串  @State  text: string = '';  // 定义一个名为eventType的状态变量，类型为string，初始值为空字符串  @State  eventType: string = '';  // build方法是一个特殊的方法，在Flutter中用于构建和渲染组件  build() {  // 创建一个Column垂直布局容器，用于放置其他组件  Column() {  // 创建一个Button组件，显示文字“KeyEvent”  Button('KeyEvent')  // 当这个按钮接收到键盘事件时，触发onKeyEvent函数  .onKeyEvent((event: KeyEvent) => {  // 如果事件类型是按下（Down）  if (event.type === KeyType.Down) {  // 将eventType设置为'Down'  this.eventType = 'Down';  }  // 如果事件类型是释放（Up）  if (event.type === KeyType.Up) {  // 将eventType设置为'Up'  this.eventType = 'Up';  }  // 更新text的值，显示按键的类型、键码和键文  this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText;  })  // 创建一个Text组件，显示text的值，并设置内边距为15像素  Text(this.text).padding(15)  // 设置Column的高度为300像素，宽度为100%，即全屏宽度，并设置外边距为35像素  }.height(300).width('100%').padding(35);   }    
}  

 七、焦点事件

 焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。

• 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

• 目前仅支持通过外接键盘的tab键、方向键触发。

• 存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦，不可获焦状态下，无法触发焦点事件，需要设置focusable属性为true才可触发。

事件

示例 

@Entry
@Component
struct MouseEventExample {@State hoverText: string = 'no hover';@State mouseText: string = '';@State action: string = '';@State mouseBtn: string = '';@State color: Color = Color.Blue;build() {Column({ space: 20 }) {Button(this.hoverText).width(180).height(80).backgroundColor(this.color).onHover((isHover: boolean) => {// 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色if (isHover) {this.hoverText = 'hover';this.color = Color.Pink;} else {this.hoverText = 'no hover';this.color = Color.Blue;}})Button('onMouse').width(180).height(80).onMouse((event: MouseEvent) => {switch (event.button) {case MouseButton.None:this.mouseBtn = 'None';break;case MouseButton.Left:this.mouseBtn = 'Left';break;case MouseButton.Right:this.mouseBtn = 'Right';break;case MouseButton.Back:this.mouseBtn = 'Back';break;case MouseButton.Forward:this.mouseBtn = 'Forward';break;case MouseButton.Middle:this.mouseBtn = 'Middle';break;}switch (event.action) {case MouseAction.Hover:this.action = 'Hover';break;case MouseAction.Press:this.action = 'Press';break;case MouseAction.Move:this.action = 'Move';break;case MouseAction.Release:this.action = 'Release';break;}this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn +'\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' +'\nscreenXY=(' + event.screenX + ',' + event.screenY + ')';})Text(this.mouseText)}.padding({ top: 30 }).width('100%')}
}

鼠标悬浮时改变文本内容与背景颜色： 

鼠标点击时：

九、组件区域变化事件 

组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。

事件