「預設焦點週遊順序」一節說明瞭 Compose
自動將焦點遍歷行為新增至元素
單維 (tab
鍵) 和二維 (方向鍵) 導覽功能。某些
您可能需要覆寫這個預設行為
所需的遍歷順序
覆寫一維週遊順序
如要變更單維導覽的預設焦點週遊順序, 建立一組參照,每個可聚焦的可組合函式各有一個參照:
val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
然後使用 focusRequester
修飾符,將每個修飾符與
可組合函式:
Column { Row { TextButton({}, Modifier.focusRequester(first)) { Text("First field") } TextButton({}, Modifier.focusRequester(third)) { Text("Third field") } } Row { TextButton({}, Modifier.focusRequester(second)) { Text("Second field") } TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") } } }
您現在可以使用 focusProperties
修飾符指定自訂週遊順序:
Column { Row { TextButton( {}, Modifier .focusRequester(first) .focusProperties { next = second } ) { Text("First field") } TextButton( {}, Modifier .focusRequester(third) .focusProperties { next = fourth } ) { Text("Third field") } } Row { TextButton( {}, Modifier .focusRequester(second) .focusProperties { next = third } ) { Text("Second field") } TextButton( {}, Modifier .focusRequester(fourth) .focusProperties { next = first } ) { Text("Fourth field") } } }
覆寫二維週遊順序
您也可以針對焦點週遊順序新增精細的控制項
使用方向鍵進行平面導覽您可以為每個元素
透過新增
focusProperties
修飾符並指定將出現的項目。
向下或任何其他方向:
TextButton( onClick = {}, modifier = Modifier .focusRequester(fourth) .focusProperties { down = third right = second } ) {}
這項技巧不但有效利用鍵盤箭頭,還能 有線和無線控制器的 D-Pad 和像子那樣。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 變更焦點行為
- Compose 中的焦點