mobile-android-design

Android 移动端设计

掌握 Material Design 3（Material You）和 Jetpack Compose，构建现代化、自适应且能与 Android 生态无缝集成的 Android 应用。

何时使用本技能

• 按照 Material Design 3 设计 Android 应用界面
• 构建 Jetpack Compose UI 和布局
• 实现 Android 导航模式（Navigation Compose）
• 为手机、平板和折叠屏设备创建自适应布局
• 使用支持动态颜色的 Material 3 主题
• 构建无障碍的 Android 界面
• 实现 Android 特有的手势和交互
• 针对不同的屏幕配置进行设计

详细章节：核心概念

本节原为 SKILL.md 中 9201 字节的章节。为满足 Codex 对技能正文 8 KB 的上限，已移至 references/details.md。

快速开始组件

@Composable
fun ItemListCard(
    item: Item,
    onItemClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        onClick = onItemClick,
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp)
    ) {
        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primaryContainer),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.Star,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.onPrimaryContainer
                )
            }

            Spacer(modifier = Modifier.width(16.dp))

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = item.title,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = item.subtitle,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }

            Icon(
                imageVector = Icons.Default.ChevronRight,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

最佳实践

1. 使用 Material 主题：通过 MaterialTheme.colorScheme 访问颜色，以自动支持深色模式
2. 支持动态颜色：在 Android 12+ 上启用动态颜色以实现个性化
3. 自适应布局：使用 WindowSizeClass 实现响应式设计
4. 内容描述：为所有可交互元素添加 contentDescription
5. 触摸目标：为无障碍提供最小 48dp 的触摸目标
6. 状态提升：提升状态，使组件可复用且可测试
7. 正确使用 remember：恰当使用 remember 和 rememberSaveable
8. 预览注解：添加带有不同配置的 @Preview

常见问题

• 重组问题：避免传递不稳定的 lambda；使用 remember
• 状态丢失：使用 rememberSaveable 应对配置变更
• 性能：长列表使用 LazyColumn 而非 Column
• 主题泄漏：确保 MaterialTheme 包裹所有可组合项
• 导航崩溃：正确处理返回键和深度链接
• 内存泄漏：在 DisposableEffect 中取消协程