Jetpack Compose Glimmer 中的圖示按鈕

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

在 Jetpack Compose Glimmer 中，IconButton 是精巧的互動式元件，用於透過單次輕觸公開補充動作。

圖示按鈕比標準按鈕小，但仍保有實體邊界，確保使用者能輕鬆透過顯示眼鏡互動。

其他用途則有標準按鈕和切換按鈕。

Jetpack Compose Glimmer 中的一些不同樣式圖示按鈕範例。這些範例顯示五種圖示按鈕狀態：已啟用 (1)、已聚焦 (2)、已按下 (3)、已停用 (4)、已停用並已聚焦 (5)。

尺寸和規格

元素 維度

容器大小下限

48 x 48 dp

內部圖示大小

32 x 32 dp

預設內容邊框間距

GlimmerTheme.componentSpacingValues.small

州

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

  • 已啟用：預設的互動狀態。
  • 已聚焦：套用 GlimmerTheme.depthEffectLevels.level1 和聚焦邊框醒目效果。
  • 已按下：在表面套用半透明白色疊加層。
  • 已停用：按鈕無法互動，且已移除視覺回饋。

圖示按鈕預設值

圖示按鈕適用下列預設值：

  • 形狀：預設為 GlimmerTheme.shapes.large (通常為圓形)。
  • 顏色：預設為 GlimmerTheme.colors.surface。
  • 內容顏色：除非明確提供，否則系統會根據背景顏色自動計算。
  • 內容邊框間距：提供圖示與容器邊緣之間的預設間距。
  • 最小尺寸：固定 48.dp 值，避免按鈕過小而無法互動。
  • 圖示大小：預設為 GlimmerTheme.iconSizes.small (32.dp)。

範例：圖示按鈕

下列程式碼會建立具有預設特性的圖示按鈕：

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}