「預設焦點週遊順序」一節說明瞭 Compose 會在單維 (tab
鍵) 和 2D (方向鍵) 導覽中,自動為元素新增焦點週遊行為。在某些情況下,您可能需要覆寫這個預設行為,並清楚說明所需的周遊順序。
覆寫一維週遊順序
如要變更單維導覽的預設焦點週遊順序,請建立一組參照,每個可聚焦的可組合項目:
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") } } }
覆寫二維週遊順序
您也可以使用方向鍵,針對 2D 導覽的 2D 導覽新增精細的焦點週遊順序。您可以針對每個元素覆寫各個路線的預設導覽目的地,方法是新增 focusProperties
修飾符,並指定上、下或其他方向的項目:
TextButton( onClick = {}, modifier = Modifier .focusRequester(fourth) .focusProperties { down = third right = second } ) {}
這項技術不僅能有效使用鍵盤箭頭,也適用於有線和無線控制器上的 D-Pad 和滴答。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 變更聚焦行為
- Compose 中的焦點