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 字节，已移至 references/details.md，以符合 Codex 对技能正文 8 KB 的上限要求。

使用方式（示例组件）

资料提供快速入门组件 ItemListCard，用 @Composable 定义，接收 item、onItemClick 与 modifier，内部使用 Card、Row、Box、Icon、Spacer、Column、Text 以及 MaterialTheme.colorScheme 与 MaterialTheme.typography：

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

最佳实践（资料列出）

• 使用 Material Theme：通过 MaterialTheme.colorScheme 取色，自动支持深色模式
• 支持动态颜色：在 Android 12+ 启用动态颜色以个性化
• 自适应布局：使用 WindowSizeClass 做响应式设计
• 内容描述：为所有交互元素添加 contentDescription
• 触控目标：无障碍最小 48dp 触控区域
• 状态提升：提升状态以让组件可复用、可测试
• 正确 remember：适当使用 remember 与 rememberSaveable
• 预览注解：添加带不同配置的 @Preview

常见问题（资料列出）

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

限制

资料未提供安装命令、平台支持范围、收费或价格、版本要求等信息，暂未提供。