经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 鸿蒙 » 查看文章
鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）
来源：cnblogs　　作者：蜀道山QAQ　　时间：2024/5/8 9:12:05　　对本文有异议

??前言

焦点事件是指程序中的重要事件或关键点。焦点事件通常是程序的核心逻辑和功能，需要引起特殊的关注和处理。

在图形用户界面(GUI)编程中，焦点事件通常与用户交互和界面输入相关。例如，当用户点击按钮、输入文本或选择菜单项时，这些操作会触发相应的焦点事件。程序需要捕获这些焦点事件并进行处理，以执行相应的操作或响应用户的请求。

另外，在事件驱动的编程模型中，焦点事件也与程序的流程控制和状态转换有关。例如，当某个关键条件满足时，程序会触发相应的焦点事件，然后根据这些事件来执行特定的操作或改变程序的状态。

??一、焦点事件

??1.基本概念

焦点事件基本概念是指在用户界面中，焦点在不同控件之间切换时，触发的相关事件。下面是一些焦点事件的基本概念：

  1. 焦点（Focus）：焦点是指用户当前正在与之交互的控件或元素。例如，在一个表单中，焦点可能位于输入框、复选框或按钮等控件上。焦点通常用来表示哪个控件可以接收用户的输入。

  2. 默认焦点（Default Focus）：默认焦点是指用户在进入一个界面或打开一个应用程序时，自动设置在界面中某个控件上的焦点。默认焦点通常是用来提高用户交互的效率，使用户可以直接开始输入或选择操作。

  3. 获焦（Focus Gained）：获焦是指当一个控件或元素成为焦点时触发的事件。获焦事件通常可以用来执行一些初始化操作，例如设置焦点控件的样式或加载数据。

  4. 失焦（Focus Lost）：失焦是指当一个控件或元素不再是焦点时触发的事件。失焦事件通常可以用来执行一些清理操作，例如保存用户输入或验证输入数据。

  5. 走焦（Traversal）：走焦是指焦点在控件之间切换的过程。焦点可以通过按下Tab键或者使用方向键来在不同的控件之间移动。

  6. 焦点态（Focus State）：焦点态是指控件或元素在成为焦点或失去焦点时，其外观或状态发生的变化。焦点态可以用来提高用户交互的可见性，例如高亮显示焦点控件或显示输入光标。

焦点事件基本概念涉及到焦点的获取、失去和切换，以及与焦点相关的事件和状态。

??2.走焦规则

image

??3.监听组件的焦点变化

接口定义：

  1. onFocus(event: () => void)//获焦事件回调
  2. onBlur(event:() => void)//失焦事件回调

案例：

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct FocusEventExample {
  5.   @State oneButtonColor: Color = Color.Gray;
  6.   @State twoButtonColor: Color = Color.Gray;
  7.   @State threeButtonColor: Color = Color.Gray;
  9.   build() {
  10.     Column({ space: 20 }) {
  11.       // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色
  12.       Button('First Button')
  13.         .width(260)
  14.         .height(70)
  15.         .backgroundColor(this.oneButtonColor)
  16.         .fontColor(Color.Black)
  17.           // 监听第一个组件的获焦事件，获焦后改变颜色
  18.         .onFocus(() => {
  19.           this.oneButtonColor = Color.Green;
  20.         })
  21.           // 监听第一个组件的失焦事件，失焦后改变颜色
  22.         .onBlur(() => {
  23.           this.oneButtonColor = Color.Gray;
  24.         })
  26.       Button('Second Button')
  27.         .width(260)
  28.         .height(70)
  29.         .backgroundColor(this.twoButtonColor)
  30.         .fontColor(Color.Black)
  31.           // 监听第二个组件的获焦事件，获焦后改变颜色
  32.         .onFocus(() => {
  33.           this.twoButtonColor = Color.Green;
  34.         })
  35.           // 监听第二个组件的失焦事件，失焦后改变颜色
  36.         .onBlur(() => {
  37.           this.twoButtonColor = Color.Grey;
  38.         })
  40.       Button('Third Button')
  41.         .width(260)
  42.         .height(70)
  43.         .backgroundColor(this.threeButtonColor)
  44.         .fontColor(Color.Black)
  45.           // 监听第三个组件的获焦事件，获焦后改变颜色
  46.         .onFocus(() => {
  47.           this.threeButtonColor = Color.Green;
  48.         })
  49.           // 监听第三个组件的失焦事件，失焦后改变颜色
  50.         .onBlur(() => {
  51.           this.threeButtonColor = Color.Gray ;
  52.         })
  53.     }.width('100%').margin({ top: 20 })
  54.   }
  55. }

image

??4.设置组件是否获焦

image

按照组件的获焦能力分为三类的表格展示，可以根据需要选择适合的组件类型来实现焦点控制功能。

接口：

  1. focusable(value: boolean)

案例：

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct FocusableExample {
  5.   @State textFocusable: boolean = true;
  6.   @State color1: Color = Color.Yellow;
  7.   @State color2: Color = Color.Yellow;
  9.   build() {
  10.     Column({ space: 5 }) {
  11.       Text('Default Text')    // 第一个Text组件未设置focusable属性，默认不可获焦
  12.         .borderColor(this.color1)
  13.         .borderWidth(2)
  14.         .width(300)
  15.         .height(70)
  16.         .onFocus(() => {
  17.           this.color1 = Color.Blue;
  18.         })
  19.         .onBlur(() => {
  20.           this.color1 = Color.Yellow;
  21.         })
  22.       Divider()
  24.       Text('focusable: ' + this.textFocusable)    // 第二个Text设置了focusable属性，初始值为true
  25.         .borderColor(this.color2)
  26.         .borderWidth(2)
  27.         .width(300)
  28.         .height(70)
  29.         .focusable(this.textFocusable)
  30.         .onFocus(() => {
  31.           this.color2 = Color.Blue;
  32.         })
  33.         .onBlur(() => {
  34.           this.color2 = Color.Yellow;
  35.         })
  37.       Divider()
  39.       Row() {
  40.         Button('Button1')
  41.           .width(140).height(70)
  42.         Button('Button2')
  43.           .width(160).height(70)
  44.       }
  46.       Divider()
  47.       Button('Button3')
  48.         .width(300).height(70)
  50.       Divider()
  51.     }.width('100%').justifyContent(FlexAlign.Center)
  52.     .onKeyEvent((e) => {    // 绑定onKeyEvent，在该Column组件获焦时，按下'F'键，可将第二个Text的focusable置反
  53.       if (e.keyCode === 2022 && e.type === KeyType.Down) {
  54.         this.textFocusable = !this.textFocusable;
  55.       }
  56.     })
  57.   }
  58. }

image

??5.自定义默认焦点

接口：

  1. defaultFocus(value: boolean)

案例：

  1. // xxx.ets
  2. import promptAction from '@ohos.promptAction';
  4. class MyDataSource implements IDataSource {
  5.   private list: number[] = [];
  6.   private listener: DataChangeListener;
  8.   constructor(list: number[]) {
  9.     this.list = list;
  10.   }
  12.   totalCount(): number {
  13.     return this.list.length;
  14.   }
  16.   getData(index: number): any {
  17.     return this.list[index];
  18.   }
  20.   registerDataChangeListener(listener: DataChangeListener): void {
  21.     this.listener = listener;
  22.   }
  24.   unregisterDataChangeListener() {
  25.   }
  26. }
  28. @Entry
  29. @Component
  30. struct SwiperExample {
  31.   private swiperController: SwiperController = new SwiperController()
  32.   private data: MyDataSource = new MyDataSource([])
  34.   aboutToAppear(): void {
  35.     let list = []
  36.     for (let i = 1; i <= 4; i++) {
  37.       list.push(i.toString());
  38.     }
  39.     this.data = new MyDataSource(list);
  40.   }
  42.   build() {
  43.     Column({ space: 5 }) {
  44.       Swiper(this.swiperController) {
  45.         LazyForEach(this.data, (item: string) => {
  46.           Row({ space: 20 }) {
  47.             Column() {
  48.               Button('1').width(200).height(200)
  49.                 .fontSize(40)
  50.                 .backgroundColor('#dadbd9')
  51.             }
  53.             Column({ space: 20 }) {
  54.               Row({ space: 20 }) {
  55.                 Button('2')
  56.                   .width(100)
  57.                   .height(100)
  58.                   .fontSize(40)
  59.                   .type(ButtonType.Normal)
  60.                   .borderRadius(20)
  61.                   .backgroundColor('#dadbd9')
  62.                 Button('3')
  63.                   .width(100)
  64.                   .height(100)
  65.                   .fontSize(40)
  66.                   .type(ButtonType.Normal)
  67.                   .borderRadius(20)
  68.                   .backgroundColor('#dadbd9')
  69.               }
  71.               Row({ space: 20 }) {
  72.                 Button('4')
  73.                   .width(100)
  74.                   .height(100)
  75.                   .fontSize(40)
  76.                   .type(ButtonType.Normal)
  77.                   .borderRadius(20)
  78.                   .backgroundColor('#dadbd9')
  79.                 Button('5')
  80.                   .width(100)
  81.                   .height(100)
  82.                   .fontSize(40)
  83.                   .type(ButtonType.Normal)
  84.                   .borderRadius(20)
  85.                   .backgroundColor('#dadbd9')
  86.               }
  88.               Row({ space: 20 }) {
  89.                 Button('6')
  90.                   .width(100)
  91.                   .height(100)
  92.                   .fontSize(40)
  93.                   .type(ButtonType.Normal)
  94.                   .borderRadius(20)
  95.                   .backgroundColor('#dadbd9')
  96.                 Button('7')
  97.                   .width(100)
  98.                   .height(100)
  99.                   .fontSize(40)
  100.                   .type(ButtonType.Normal)
  101.                   .borderRadius(20)
  102.                   .backgroundColor('#dadbd9')
  103.               }
  104.             }
  105.           }
  106.           .width(480)
  107.           .height(380)
  108.           .justifyContent(FlexAlign.Center)
  109.           .borderWidth(2)
  110.           .borderColor(Color.Gray)
  111.           .backgroundColor(Color.White)
  112.         }, item => item)
  113.       }
  114.       .cachedCount(2)
  115.       .index(0)
  116.       .interval(4000)
  117.       .indicator(true)
  118.       .loop(true)
  119.       .duration(1000)
  120.       .itemSpace(0)
  121.       .curve(Curve.Linear)
  122.       .onChange((index: number) => {
  123.         console.info(index.toString());
  124.       })
  125.       .margin({ left: 20, top: 20, right: 20 })
  127.       Row({ space: 40 }) {
  128.         Button('←')
  129.           .fontSize(40)
  130.           .fontWeight(FontWeight.Bold)
  131.           .fontColor(Color.Black)
  132.           .backgroundColor(Color.Transparent)
  133.           .onClick(() => {
  134.             this.swiperController.showPrevious();
  135.           })
  136.         Button('→')
  137.           .fontSize(40)
  138.           .fontWeight(FontWeight.Bold)
  139.           .fontColor(Color.Black)
  140.           .backgroundColor(Color.Transparent)
  141.           .onClick(() => {
  142.             this.swiperController.showNext();
  143.           })
  144.       }
  145.       .width(480)
  146.       .height(50)
  147.       .justifyContent(FlexAlign.Center)
  148.       .borderWidth(2)
  149.       .borderColor(Color.Gray)
  150.       .backgroundColor('#f7f6dc')
  152.       Row({ space: 40 }) {
  153.         Button('Cancel')
  154.           .fontSize(30)
  155.           .fontColor('#787878')
  156.           .type(ButtonType.Normal)
  157.           .width(140)
  158.           .height(50)
  159.           .backgroundColor('#dadbd9')
  161.         Button('OK')
  162.           .fontSize(30)
  163.           .fontColor('#787878')
  164.           .type(ButtonType.Normal)
  165.           .width(140)
  166.           .height(50)
  167.           .backgroundColor('#dadbd9')
  168.           .onClick(() => {
  169.             promptAction.showToast({ message: 'Button OK on clicked' });
  170.           })
  171.       }
  172.       .width(480)
  173.       .height(80)
  174.       .justifyContent(FlexAlign.Center)
  175.       .borderWidth(2)
  176.       .borderColor(Color.Gray)
  177.       .backgroundColor('#dff2e4')
  178.       .margin({ left: 20, bottom: 20, right: 20 })
  179.     }.backgroundColor('#f2f2f2')
  180.     .margin({ left: 50, top: 50, right: 20 })
  181.   }
  182. }

image

??6.自定义TAB键走焦顺序

  1. Button('1').width(200).height(200)
  2.   .fontSize(40)
  3.   .backgroundColor('#dadbd9')
  4.   .tabIndex(1)    // Button-1设置为第一个tabIndex节点
  5. Button('←')
  6.   .fontSize(40)
  7.   .fontWeight(FontWeight.Bold)
  8.   .fontColor(Color.Black)
  9.   .backgroundColor(Color.Transparent)
  10.   .onClick(() => {
  11.     this.swiperController.showPrevious();
  12.   })
  13.   .tabIndex(2)    // Button-左箭头设置为第二个tabIndex节点
  14. Button('OK')
  15.   .fontSize(30)
  16.   .fontColor('#787878')
  17.   .type(ButtonType.Normal)
  18.   .width(140).height(50).backgroundColor('#dadbd9')
  19.   .onClick(() => {
  20.     promptAction.showToast({ message: 'Button OK on clicked' });
  21.   })
  22.   .tabIndex(3)    // Button-OK设置为第三个tabIndex节点

??6.1 groupDefaultFocus

我们分别将某个组件设置为tabIndex节点，设置完之后，只有当我们按下TAB/ShiftTab键在这3个组件上进行焦点切换时，才会出现快速走焦的效果。

为了解决这个问题，我们可以给每个区域的容器设置tabIndex属性。然而，这样设置存在一个问题：当首次走焦到容器上时，焦点会默认落在容器内的第一个可获焦组件上，而不是我们想要的Button1、左箭头、ButtonOK。

为了解决这个问题，我们引入了一个名为groupDefaultFocus的通用属性，该属性接受一个布尔值参数，默认值为false。使用该属性需要与tabIndex属性结合使用，首先使用tabIndex为每个区域（容器）定义焦点切换顺序，然后为Button1、左箭头、ButtonOK这些组件绑定groupDefaultFocus(true)。这样，在首次走焦到目标区域（容器）时，拥有groupDefaultFocus(true)绑定的子组件将同时获取焦点。

  1. // xxx.ets
  2. import promptAction from '@ohos.promptAction';
  4. class MyDataSource implements IDataSource {
  5.   private list: number[] = [];
  6.   private listener: DataChangeListener;
  8.   constructor(list: number[]) {
  9.     this.list = list;
  10.   }
  12.   totalCount(): number {
  13.     return this.list.length;
  14.   }
  16.   getData(index: number): any {
  17.     return this.list[index];
  18.   }
  20.   registerDataChangeListener(listener: DataChangeListener): void {
  21.     this.listener = listener;
  22.   }
  24.   unregisterDataChangeListener() {
  25.   }
  26. }
  28. @Entry
  29. @Component
  30. struct SwiperExample {
  31.   private swiperController: SwiperController = new SwiperController()
  32.   private data: MyDataSource = new MyDataSource([])
  34.   aboutToAppear(): void {
  35.     let list = []
  36.     for (let i = 1; i <= 4; i++) {
  37.       list.push(i.toString());
  38.     }
  39.     this.data = new MyDataSource(list);
  40.   }
  42.   build() {
  43.     Column({ space: 5 }) {
  44.       Swiper(this.swiperController) {
  45.         LazyForEach(this.data, (item: string) => {
  46.           Row({ space: 20 }) {    // 设置该Row组件为tabIndex的第一个节点
  47.             Column() {
  48.               Button('1').width(200).height(200)
  49.                 .fontSize(40)
  50.                 .backgroundColor('#dadbd9')
  51.                 .groupDefaultFocus(true)    // 设置Button-1为第一个tabIndex的默认焦点
  52.             }
  54.             Column({ space: 20 }) {
  55.               Row({ space: 20 }) {
  56.                 Button('2')
  57.                   .width(100)
  58.                   .height(100)
  59.                   .fontSize(40)
  60.                   .type(ButtonType.Normal)
  61.                   .borderRadius(20)
  62.                   .backgroundColor('#dadbd9')
  63.                 Button('3')
  64.                   .width(100)
  65.                   .height(100)
  66.                   .fontSize(40)
  67.                   .type(ButtonType.Normal)
  68.                   .borderRadius(20)
  69.                   .backgroundColor('#dadbd9')
  70.               }
  72.               Row({ space: 20 }) {
  73.                 Button('4')
  74.                   .width(100)
  75.                   .height(100)
  76.                   .fontSize(40)
  77.                   .type(ButtonType.Normal)
  78.                   .borderRadius(20)
  79.                   .backgroundColor('#dadbd9')
  80.                 Button('5')
  81.                   .width(100)
  82.                   .height(100)
  83.                   .fontSize(40)
  84.                   .type(ButtonType.Normal)
  85.                   .borderRadius(20)
  86.                   .backgroundColor('#dadbd9')
  87.               }
  89.               Row({ space: 20 }) {
  90.                 Button('6')
  91.                   .width(100)
  92.                   .height(100)
  93.                   .fontSize(40)
  94.                   .type(ButtonType.Normal)
  95.                   .borderRadius(20)
  96.                   .backgroundColor('#dadbd9')
  97.                 Button('7')
  98.                   .width(100)
  99.                   .height(100)
  100.                   .fontSize(40)
  101.                   .type(ButtonType.Normal)
  102.                   .borderRadius(20)
  103.                   .backgroundColor('#dadbd9')
  104.               }
  105.             }
  106.           }
  107.           .width(480)
  108.           .height(380)
  109.           .justifyContent(FlexAlign.Center)
  110.           .borderWidth(2)
  111.           .borderColor(Color.Gray)
  112.           .backgroundColor(Color.White)
  113.           .tabIndex(1)
  114.         }, item => item)
  115.       }
  116.       .cachedCount(2)
  117.       .index(0)
  118.       .interval(4000)
  119.       .indicator(true)
  120.       .loop(true)
  121.       .duration(1000)
  122.       .itemSpace(0)
  123.       .curve(Curve.Linear)
  124.       .onChange((index: number) => {
  125.         console.info(index.toString());
  126.       })
  127.       .margin({ left: 20, top: 20, right: 20 })
  129.       Row({ space: 40 }) {    // 设置该Row组件为第二个tabIndex节点
  130.         Button('←')
  131.           .fontSize(40)
  132.           .fontWeight(FontWeight.Bold)
  133.           .fontColor(Color.Black)
  134.           .backgroundColor(Color.Transparent)
  135.           .onClick(() => {
  136.             this.swiperController.showPrevious();
  137.           })
  138.           .groupDefaultFocus(true)    // 设置Button-左箭头为第二个tabIndex节点的默认焦点
  139.         Button('→')
  140.           .fontSize(40)
  141.           .fontWeight(FontWeight.Bold)
  142.           .fontColor(Color.Black)
  143.           .backgroundColor(Color.Transparent)
  144.           .onClick(() => {
  145.             this.swiperController.showNext();
  146.           })
  147.       }
  148.       .width(480)
  149.       .height(50)
  150.       .justifyContent(FlexAlign.Center)
  151.       .borderWidth(2)
  152.       .borderColor(Color.Gray)
  153.       .backgroundColor('#f7f6dc')
  154.       .tabIndex(2)
  156.       Row({ space: 40 }) {    // 设置该Row组件为第三个tabIndex节点
  157.         Button('Cancel')
  158.           .fontSize(30)
  159.           .fontColor('#787878')
  160.           .type(ButtonType.Normal)
  161.           .width(140)
  162.           .height(50)
  163.           .backgroundColor('#dadbd9')
  165.         Button('OK')
  166.           .fontSize(30)
  167.           .fontColor('#787878')
  168.           .type(ButtonType.Normal)
  169.           .width(140)
  170.           .height(50)
  171.           .backgroundColor('#dadbd9')
  172.           .defaultFocus(true)
  173.           .onClick(() => {
  174.             promptAction.showToast({ message: 'Button OK on clicked' });
  175.           })
  176.           .groupDefaultFocus(true)    // 设置Button-OK为第三个tabIndex节点的默认焦点
  177.       }
  178.       .width(480)
  179.       .height(80)
  180.       .justifyContent(FlexAlign.Center)
  181.       .borderWidth(2)
  182.       .borderColor(Color.Gray)
  183.       .backgroundColor('#dff2e4')
  184.       .margin({ left: 20, bottom: 20, right: 20 })
  185.       .tabIndex(3)
  186.     }.backgroundColor('#f2f2f2')
  187.     .margin({ left: 50, top: 50, right: 20 })
  188.   }
  189. }

??6.2 focusOnTouch

接口：

  1. focusOnTouch(value: boolean)

点击是指使用触屏或鼠标左键进行单击，默认为false的组件，例如Button，不绑定该API时，点击Button不会使其获焦，当给Button绑定focusOnTouch(true)时，点击Button会使Button立即获得焦点。

案例：

  1. // requestFocus.ets
  2. import promptAction from '@ohos.promptAction';
  4. @Entry
  5. @Component
  6. struct RequestFocusExample {
  7.   @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'N']
  9.   build() {
  10.     Column({ space:20 }){
  11.       Button("id: " + this.idList[0] + " focusOnTouch(true) + focusable(false)")
  12.         .width(400).height(70).fontColor(Color.White).focusOnTouch(true)
  13.         .focusable(false)
  14.       Button("id: " + this.idList[1] + " default")
  15.         .width(400).height(70).fontColor(Color.White)
  16.       Button("id: " + this.idList[2] + " focusOnTouch(false)")
  17.         .width(400).height(70).fontColor(Color.White).focusOnTouch(false)
  18.       Button("id: " + this.idList[3] + " focusOnTouch(true)")
  19.         .width(400).height(70).fontColor(Color.White).focusOnTouch(true)
  20.     }.width('100%').margin({ top:20 })
  21.   }
  22. }

??6.3 focusControl.requestFocus

在任意执行语句中调用该API，指定目标组件的id为方法参数，当程序执行到该语句时，会立即给指定的目标组件申请焦点。

接口：

  1. focusControl.requestFocus(id: string)

案例：

  1. // requestFocus.ets
  2. import promptAction from '@ohos.promptAction';
  4. @Entry
  5. @Component
  6. struct RequestFocusExample {
  7.   @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'N']
  8.   @State requestId: number = 0
  10.   build() {
  11.     Column({ space:20 }){
  12.       Row({space: 5}) {
  13.         Button("id: " + this.idList[0] + " focusable(false)")
  14.           .width(200).height(70).fontColor(Color.White)
  15.           .id(this.idList[0])
  16.           .focusable(false)
  17.         Button("id: " + this.idList[1])
  18.           .width(200).height(70).fontColor(Color.White)
  19.           .id(this.idList[1])
  20.       }
  21.       Row({space: 5}) {
  22.         Button("id: " + this.idList[2])
  23.           .width(200).height(70).fontColor(Color.White)
  24.           .id(this.idList[2])
  25.         Button("id: " + this.idList[3])
  26.           .width(200).height(70).fontColor(Color.White)
  27.           .id(this.idList[3])
  28.       }
  29.       Row({space: 5}) {
  30.         Button("id: " + this.idList[4])
  31.           .width(200).height(70).fontColor(Color.White)
  32.           .id(this.idList[4])
  33.         Button("id: " + this.idList[5])
  34.           .width(200).height(70).fontColor(Color.White)
  35.           .id(this.idList[5])
  36.       }
  37.     }.width('100%').margin({ top:20 })
  38.     .onKeyEvent((e) => {
  39.       if (e.keyCode >= 2017 && e.keyCode <= 2022) {
  40.         this.requestId = e.keyCode - 2017;
  41.       } else if (e.keyCode === 2030) {
  42.         this.requestId = 6;
  43.       } else {
  44.         return;
  45.       }
  46.       if (e.type !== KeyType.Down) {
  47.         return;
  48.       }
  49.       let res = focusControl.requestFocus(this.idList[this.requestId]);
  50.       if (res) {
  51.         promptAction.showToast({message: 'Request success'});
  52.       } else {
  53.         promptAction.showToast({message: 'Request failed'});
  54.       }
  55.     })
  56.   }
  57. }

依次按下 TAB、A、B、C、D、E、F、N
image

??写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing??，不定期分享原创知识。
  • 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY

image

原文链接：https://www.cnblogs.com/shudaoshan/p/18178396

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

鸿蒙热门文章

  • 小窗口大魔力，实况窗服务实时掌控重要信息变化
  • 鸿蒙HarmonyOS实战-ArkUI动画（放大缩小视图）
  • 鸿蒙HarmonyOS实战-ArkUI组件（TextInput/TextArea）
  • 鸿蒙HarmonyOS实战-Web组件（请求响应和页面调试）
  • Winform 控件库 MaterialSkin.2 使用教程（鸿蒙字体版）
  • 鸿蒙开发学习（一）之ArkTS
  • 纯血鸿蒙来了，企业开发者应该关注什么
  • 鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）
  • 鸿蒙开发游戏（一）---大鱼吃小鱼（界面部署）
  • 鸿蒙开发游戏（三）---大鱼吃小鱼（放置NPC）

    • 鸿蒙推荐文章

  • 鸿蒙HarmonyOS实战-ArkTS语言基础类库（并发）
  • 鸿蒙HarmonyOS实战-Stage模型（应用上下文Context）
  • 鸿蒙HarmonyOS实战-Stage模型（开发卡片事件）
  • 鸿蒙HarmonyOS实战-Stage模型（UIAbility组件）
  • 鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Canvas）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Tabs）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Navigation）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Flex）
  • 鸿蒙HarmonyOS实战-工具安装和Helloworld案例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号