焦點(diǎn)邏輯

焦點(diǎn)移動(dòng)是智慧屏的主要交互方式，本節(jié)將介紹焦點(diǎn)邏輯的主要規(guī)則。

• 容器組件焦點(diǎn)分發(fā)邏輯： 容器組件在第一次獲焦時(shí)焦點(diǎn)一般都落在第一個(gè)可獲焦的子組件上，再次獲焦時(shí)焦點(diǎn)落在上一次失去焦點(diǎn)時(shí)獲焦的子組件上。容器組件一般都有特定的焦點(diǎn)分發(fā)邏輯，以下分別說(shuō)明常用容器組件的焦點(diǎn)分發(fā)邏輯。

1. div 組件通過(guò)按鍵移動(dòng)獲焦時(shí)，焦點(diǎn)會(huì)移動(dòng)到在移動(dòng)方向上與當(dāng)前獲焦組件布局中心距離最近的可獲焦葉子節(jié)點(diǎn)上。如圖 1 中焦點(diǎn)在上方的橫向 div 的第二個(gè)子組件上，當(dāng)點(diǎn)擊 down 按鍵時(shí)，焦點(diǎn)要移動(dòng)到下方的橫向 div 中。這時(shí)下方的橫向 div 中的子組件會(huì)與當(dāng)前焦點(diǎn)所在的組件進(jìn)行布局中心距離的計(jì)算，其中距離最近的子組件獲焦。

圖1 div 焦點(diǎn)移動(dòng)時(shí)距離計(jì)算示例

1. list 組件包含 list-item 與 list-item-group，list 組件每次獲焦時(shí)會(huì)使第一個(gè)可獲焦的 item 獲焦。list-item-group 為特殊的 list-item，且兩者都與 div 的焦點(diǎn)邏輯相同。

1. stack 組件只能由自頂而下的第一個(gè)可獲焦的子組件獲焦。

1. swiper 的每個(gè)頁(yè)面和 refresh 的頁(yè)面的焦點(diǎn)邏輯都與 div 的相同。

1. tabs 組件包含 tab-bar 與 tab-content，tab-bar 中的子組件默認(rèn)都能獲焦，與是否有可獲焦的葉子結(jié)點(diǎn)無(wú)關(guān)。tab-bar 與 tab-content 的每個(gè)頁(yè)面都與 div 的焦點(diǎn)邏輯相同。

1. dialog 的 button 可獲焦，若有多個(gè) button，默認(rèn)初始焦點(diǎn)落在第二個(gè) button 上。

1. popup 無(wú)法獲焦。

• focusable 屬性使用

通用屬性 focusable 主要用于控制組件能否獲焦，本身不支持焦點(diǎn)的組件在設(shè)置此屬性后可以擁有獲取焦點(diǎn)的能力。如 text 組件本身不能獲焦，焦點(diǎn)無(wú)法移動(dòng)到它上面，設(shè)置 text 的 focusable 屬性為 true 后，text 組件便可以獲焦。特別的是，如果在沒(méi)有使用 focusable 屬性的情況下，使用了 focus，blur 或 key 事件，會(huì)默認(rèn)添加 focusable 屬性為 true。

容器組件是否可獲焦依賴(lài)于是否擁有可獲焦的子組件。如果容器組件內(nèi)沒(méi)有可以獲焦的子組件，即使設(shè)置了 focusable 為 true，依然不能獲焦。當(dāng)容器組件 focusable 屬性設(shè)置為 false，則它本身和它所包含的所有組件都不可獲焦。