Jetpack Compose Glimmer 中的按鈕

適用的 XR 裝置
這份指南可協助您為這類 XR 裝置打造體驗。
瞭解 XR 裝置類型 →
顯示眼鏡
瞭解 XR 裝置類型 →

在 Jetpack Compose Glimmer 中，Button 是經過最佳化的互動式元件，可顯示智慧眼鏡輸入內容，並透過狀態提供清楚的視覺回饋，引導使用者操作。

按鈕是以 Jetpack Compose Glimmer 介面系統為基礎建構而成，可自動處理邊框和深度等實體屬性。

標準按鈕包含文字標籤和選用圖示。你可以使用這項功能執行主要或次要動作。此外，還有專用按鈕，例如圖示按鈕和切換按鈕，這些按鈕在 Jetpack Compose Glimmer 中定義為個別元件。

預設

Jetpack Compose Glimmer 中不同樣式的按鈕範例。這些範例顯示預設中型按鈕，以及三種按鈕狀態：已啟用 (1)、已聚焦 (2) 和已按下 (3)。

大

Jetpack Compose Glimmer 中不同樣式的按鈕範例。這些範例顯示大型按鈕，並包含三種按鈕狀態：已啟用 (1)、已聚焦 (2) 和已按下 (3)。

圖解

按鈕由容器和標籤組成，並可視需要加入開頭和結尾圖示。

Part 說明

容器

按鈕的背景表面。

標籤

描述動作的文字。

圖示 (選用)

開頭或結尾的視覺指標。

大小

Jetpack Compose Glimmer 按鈕支援兩種大小變化。這些屬性會影響最小高度和內部邊框間距。

大小 高度下限 預設使用政策

中

48.dp

標準動作和清單 (預設)。

大

72.dp

高強調動作或主要畫面進入點。

州

Jetpack Compose Glimmer 中的按鈕會變更外觀，以傳達按鈕的狀態。

  • 已啟用：互動式按鈕的預設狀態。
  • 已聚焦：聚焦時，按鈕會套用 GlimmerTheme.depthEffectLevels.level1 和聚焦邊框醒目顯示。
  • 已按下：啟用後，系統會在表面套用半透明的白色疊加層。
  • 已停用：按鈕不會回應輸入內容，且視覺外觀會調整。

按鈕預設值

標準按鈕適用下列預設值：

範例：含有文字和圖示的按鈕

基本按鈕只包含文字標籤，但您也可以在文字的開頭 (使用 leadingIcon) 或結尾 (使用 trailingIcon) 新增圖示，提供額外情境資訊。

下列程式碼會建立同時包含開頭和結尾圖示的按鈕：

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}

按鈕群組

ButtonGroup 可組合函式可將按鈕分組到可捲動的列中，做為焦點控制器。使用者捲動時，焦點會自動移動，醒目顯示與目前捲動位置對應的按鈕。

按鈕群組捲動和焦點功能的範例。

範例：按鈕群組

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}

按鈕群組中的焦點控制項

您可以將焦點移至群組中的任何按鈕，手動控制選取項目。

使用 ButtonGroup 狀態自訂及控管捲動行為：

  1. 使用 rememberButtonGroupState 宣告狀態。
  2. 並傳遞至 ButtonGroup 可組合函式。
  3. 呼叫 animateScrollToItem (或 scrollToItem，用於即時捲動) 即可捲動至特定項目，並自動將焦點移至該項目。

以下程式碼會在點選按鈕時，將焦點從一個按鈕移至另一個按鈕：

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}