焦點控制

2024-01-22 16:19 更新

自定義組件的走焦效果，可設(shè)置組件是否走焦和具體的走焦順序，tab鍵或者方向鍵切換焦點。

說明

從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨標(biāo)記該內(nèi)容的起始版本。

屬性

名稱

參數(shù)類型

描述

focusable

boolean

設(shè)置當(dāng)前組件是否可以獲焦。

說明：

存在默認交互邏輯的組件例如Button、TextInput等，默認即為可獲焦，Text、Image等組件則默認狀態(tài)為不可獲焦。不可獲焦?fàn)顟B(tài)下，無法觸發(fā)焦點事件。

tabIndex9+

number

自定義組件tab鍵走焦能力。若有配置了tabIndex大于0的組件，則tab鍵走焦只會在tabIndex大于0的組件內(nèi)按照tabIndex的值從小到大并循環(huán)依次走焦。若沒有配置tabIndex大于0的組件，則tabIndex等于0的組件按照組件預(yù)設(shè)的走焦規(guī)則走焦。

- tabIndex >= 0：表示元素是可聚焦的，并且可以通過tab鍵走焦來訪問到該元素。

- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通過tab鍵走焦來訪問到該元素。

默認值：0

defaultFocus9+

boolean

設(shè)置當(dāng)前組件是否為當(dāng)前頁面上的默認焦點，僅在初次創(chuàng)建的頁面第一次進入時生效。

默認值：false

groupDefaultFocus9+

boolean

設(shè)置當(dāng)前組件是否為當(dāng)前組件所在容器獲焦時的默認焦點，僅在初次創(chuàng)建容器節(jié)點第一次獲焦時生效。

默認值：false

說明： 必須與tabIndex聯(lián)合使用，當(dāng)某個容器設(shè)置了tabIndex，且容器內(nèi)某子組件設(shè)置了groupDefaultFocus，當(dāng)該容器首次獲焦時，會自動將焦點轉(zhuǎn)移至該組件上。

focusOnTouch9+

boolean

設(shè)置當(dāng)前組件是否支持點擊獲焦能力。

默認值：false

說明： 僅在組件可點擊時才能正常獲取焦點。

focusControl9+

requestFocus9+

requestFocus(value: string): boolean

方法語句中可使用的全局接口，調(diào)用此接口可以主動讓焦點轉(zhuǎn)移至參數(shù)指定的組件上。

參數(shù)：

名稱

類型

必填

描述

value

string

是

目標(biāo)組件使用接口key(value: string)綁定的字符串。

返回值：

類型

說明

boolean

返回是否成功給目標(biāo)組件申請到焦點。若參數(shù)指向的目標(biāo)組件存在，且目標(biāo)組件可獲焦，則返回true，否則返回false。

說明

支持焦點控制的組件：TextInput、TextArea、Search、Button、Text、Image、List、Grid。焦點事件當(dāng)前僅支持在真機上顯示運行效果。

示例

示例1

defaultFocus/groupDefaultFocus/focusOnTouch示例代碼：

defaultFocus可以使綁定的組件成為頁面創(chuàng)建后首次獲焦的焦點。groupDefaultFocus可以使綁定的組件成為tabIndex容器創(chuàng)建后首次獲焦的焦點。focusOnTouch可以使綁定的組件點擊后立即獲焦。

  1. // focusTest.ets
  2. @Entry
  3. @Component
  4. struct FocusableExample {
  5.   @State inputValue: string = ''
  6. 

  7.   build() {
  8.     Scroll() {
  9.       Row({ space: 20 }) {
  10.         Column({ space: 20 }) {
  11.           Column({ space: 5 }) {
  12.             Button('Group1')
  13.               .width(165)
  14.               .height(40)
  15.               .fontColor(Color.White)
  16.               .focusOnTouch(true)           // 該Button組件點擊后可獲焦
  17.             Row({ space: 5 }) {
  18.               Button()
  19.                 .width(80)
  20.                 .height(40)
  21.                 .fontColor(Color.White)
  22.               Button()
  23.                 .width(80)
  24.                 .height(40)
  25.                 .fontColor(Color.White)
  26.                 .focusOnTouch(true)           // 該Button組件點擊后可獲焦
  27.             }
  28.             Row({ space: 5 }) {
  29.               Button()
  30.                 .width(80)
  31.                 .height(40)
  32.                 .fontColor(Color.White)
  33.               Button()
  34.                 .width(80)
  35.                 .height(40)
  36.                 .fontColor(Color.White)
  37.             }
  38.           }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed)
  39.           .tabIndex(1)                      // 該Column組件為按TAB鍵走焦的第一個獲焦的組件
  40.           Column({ space: 5 }) {
  41.             Button('Group2')
  42.               .width(165)
  43.               .height(40)
  44.               .fontColor(Color.White)
  45.             Row({ space: 5 }) {
  46.               Button()
  47.                 .width(80)
  48.                 .height(40)
  49.                 .fontColor(Color.White)
  50.               Button()
  51.                 .width(80)
  52.                 .height(40)
  53.                 .fontColor(Color.White)
  54.                 .groupDefaultFocus(true)      // 該Button組件上級Column組件獲焦時獲焦
  55.             }
  56.             Row({ space: 5 }) {
  57.               Button()
  58.                 .width(80)
  59.                 .height(40)
  60.                 .fontColor(Color.White)
  61.               Button()
  62.                 .width(80)
  63.                 .height(40)
  64.                 .fontColor(Color.White)
  65.             }
  66.           }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed)
  67.           .tabIndex(2)                      // 該Column組件為按TAB鍵走焦的第二個獲焦的組件
  68.         }
  69.         Column({ space: 5 }) {
  70.           TextInput({placeholder: 'input', text: this.inputValue})
  71.             .onChange((value: string) => {
  72.               this.inputValue = value
  73.             })
  74.             .defaultFocus(true)             // 該TextInput組件為頁面的初始默認焦點
  75.           Button('Group3')
  76.             .width(165)
  77.             .height(40)
  78.             .fontColor(Color.White)
  79.           Row({ space: 5 }) {
  80.             Button()
  81.               .width(80)
  82.               .height(40)
  83.               .fontColor(Color.White)
  84.             Button()
  85.               .width(80)
  86.               .height(40)
  87.               .fontColor(Color.White)
  88.           }
  89.           Button()
  90.             .width(165)
  91.             .height(40)
  92.             .fontColor(Color.White)
  93.           Row({ space: 5 }) {
  94.             Button()
  95.               .width(80)
  96.               .height(40)
  97.               .fontColor(Color.White)
  98.             Button()
  99.               .width(80)
  100.               .height(40)
  101.               .fontColor(Color.White)
  102.           }
  103.           Button()
  104.             .width(165)
  105.             .height(40)
  106.             .fontColor(Color.White)
  107.           Row({ space: 5 }) {
  108.             Button()
  109.               .width(80)
  110.               .height(40)
  111.               .fontColor(Color.White)
  112.             Button()
  113.               .width(80)
  114.               .height(40)
  115.               .fontColor(Color.White)
  116.           }
  117.         }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed)
  118.         .tabIndex(3)                      // 該Column組件為按TAB鍵走焦的第三個獲焦的組件
  119.       }.alignItems(VerticalAlign.Top)
  120.     }
  121.   }
  122. }

示意圖：

首次按下TAB鍵，焦點切換到defaultFocus綁定的組件上：

第二次按TAB鍵，焦點切換到tabIndex(1)的容器上，且自動走到其內(nèi)部的groupDefaultFocus綁定的組件上：

第三次按TAB鍵，焦點切換到tabIndex(2)的容器上，且自動走到其內(nèi)部的groupDefaultFocus綁定的組件上：

第四次按TAB鍵，焦點切換到tabIndex(3)的容器上，且自動走到其內(nèi)部的groupDefaultFocus綁定的組件上：

點擊綁定了focusOnTouch的組件，組件自身獲焦：

示例2

focusControl.requestFocus示例代碼：

使用focusContrl.requestFocus接口使指定組件獲取焦點。

  1. // requestFocus.ets
  2. import prompt from '@ohos.prompt'
  3. 

  4. @Entry
  5. @Component
  6. struct RequestFocusExample {
  7.   @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'LastPageId']
  8.   @State selectId: string = 'LastPageId'
  9. 

  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.           .key(this.idList[0])
  16.           .focusable(false)
  17.         Button("id: " + this.idList[1])
  18.           .width(200).height(70).fontColor(Color.White)
  19.           .key(this.idList[1])
  20.       }
  21.       Row({space: 5}) {
  22.         Button("id: " + this.idList[2])
  23.           .width(200).height(70).fontColor(Color.White)
  24.           .key(this.idList[2])
  25.         Button("id: " + this.idList[3])
  26.           .width(200).height(70).fontColor(Color.White)
  27.           .key(this.idList[3])
  28.       }
  29.       Row({space: 5}) {
  30.         Button("id: " + this.idList[4])
  31.           .width(200).height(70).fontColor(Color.White)
  32.           .key(this.idList[4])
  33.         Button("id: " + this.idList[5])
  34.           .width(200).height(70).fontColor(Color.White)
  35.           .key(this.idList[5])
  36.       }
  37.       Row({space: 5}) {
  38.         Select([{value: this.idList[0]},
  39.                 {value: this.idList[1]},
  40.                 {value: this.idList[2]},
  41.                 {value: this.idList[3]},
  42.                 {value: this.idList[4]},
  43.                 {value: this.idList[5]},
  44.                 {value: this.idList[6]}])
  45.           .value(this.selectId)
  46.           .onSelect((index: number) => {
  47.             this.selectId = this.idList[index]
  48.           })
  49.         Button("RequestFocus")
  50.           .width(200).height(70).fontColor(Color.White)
  51.           .onClick(() => {
  52.             var res = focusControl.requestFocus(this.selectId)      // 使選中的this.selectId的組件獲焦
  53.             if (res) {
  54.               prompt.showToast({message: 'Request success'})
  55.             } else {
  56.               prompt.showToast({message: 'Request failed'})
  57.             }
  58.           })
  59.       }
  60.     }.width('100%').margin({ top:20 })
  61.   }
  62. }

示意圖：

按下TAB鍵，激活焦點態(tài)顯示。

申請不存在的組件獲焦：

申請不可獲焦的組件獲焦：

申請存在且可獲焦的組件獲焦：

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號