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")
        }
    }
}

代码要点

• 按钮图标使用 painterResource 将本地 XML 矢量可绘制对象 (R.drawable.ic_favorite) 作为来源，替换 Icons.Default 库依赖项以优化资源加载。
• leadingIcon 和 trailingIcon 参数用于将图标可组合项注入按钮布局，从而展示 Jetpack Compose Glimmer 对灵活的图标定位的支持。
• 这些按钮使用默认的大小调整配置，该配置会自动管理内部边衬区和文本缩放，以符合标准的 Jetpack Compose Glimmer 设计规范，而无需显式的大小调整修饰符。