Jetpack Compose Glimmer 中的按鈕

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

在 Jetpack Compose Glimmer 中，Button 元件是經過最佳化的互動式元件，可搭配 AI 眼鏡輸入內容使用，並針對啟用、懸停和按下狀態提供清楚的視覺回饋，引導使用者操作。

圖 1. Jetpack Compose Glimmer 中的幾種不同樣式按鈕範例。

範例：按鈕變化

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

程式碼重點

  • 按鈕圖示來源為本機 XML 向量可繪項目 (R.drawable.ic_favorite)，使用 painterResource 替換 Icons.Default 程式庫依附元件，以最佳化資產載入作業。
  • leadingIcon 和 trailingIcon 參數用於將圖示可組合項插入按鈕版面配置，展現 Jetpack Compose Glimmer 對彈性圖示位置的支援。
  • 按鈕會使用預設大小設定，自動管理內部邊框間距和文字縮放比例，與標準 Jetpack Compose Glimmer 設計規格對齊，不需明確的大小修飾符。