Jetpack Compose Glimmer 中的按鈕

適用的 XR 裝置

這份指南可協助您為這類 XR 裝置打造體驗。

瞭解 XR 裝置類型 →

瞭解 XR 裝置類型 →

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

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

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

預設

大

圖解

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

大小

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

州

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

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

按鈕預設值

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

• 根據預設，按鈕會使用 GlimmerTheme.typography.bodySmall。請確保按鈕中的文字簡潔明瞭，清楚說明動作。
• 按鈕的預設形狀為 GlimmerTheme.shapes.large。這種一致的圓角設計有助於使用者在顯示眼鏡介面中識別按鈕。

範例：含文字的按鈕

下列程式碼會建立含有文字的標準按鈕：

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}
ButtonSamples.kt

範例：開頭和結尾有圖示的按鈕

您也可以在文字開頭 (使用 leadingIcon) 或結尾 (使用 trailingIcon) 新增圖示，提供額外背景資訊。

下列程式碼會建立含有前置圖示的按鈕：

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}
ButtonSamples.kt