如何用Jetpack Compose Kotlin实现Figma设计的内阴影组件？

1. 拆解设计稿核心元素 #

先把Figma里的视觉信息拆解清楚：

• 布局结构：横向/纵向排列、嵌套关系
• 样式细节：文字的字体、大小、颜色、字重；背景色、边框色/粗细；圆角、内外间距
• 交互状态：正常、点击、禁用等状态下的样式变化
• 附属元素：图标、分割线等

2. 定义全局样式常量 #

把设计稿里的固定样式抽成常量，方便统一修改和复用：

// 根据你的Figma设计稿调整数值
object DesignTokens {
    // 颜色
    val PrimaryText = Color(0xFF1A1A1A)
    val SecondaryText = Color(0xFF666666)
    val CardBg = Color(0xFFFFFFFF)
    val BorderColor = Color(0xFFE5E5E5)
    
    // 文字尺寸
    val TitleSize = 16.sp
    val SubtitleSize = 14.sp
    
    // 间距与圆角
    val PaddingMd = 16.dp
    val PaddingSm = 8.dp
    val CardRadius = 8.dp
}

3. 编写Compose组件 #

根据拆解的布局结构，用Compose的基础布局组件（Row/Column/Box）搭建：

示例：假设设计稿是带图标和双行文字的列表项 #

@Composable
fun FigmaListItem(
    icon: @Composable () -> Unit,
    title: String,
    subtitle: String? = null,
    onClick: () -> Unit = {},
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
            .padding(DesignTokens.PaddingMd)
            .background(DesignTokens.CardBg, RoundedCornerShape(DesignTokens.CardRadius))
            .border(1.dp, DesignTokens.BorderColor, RoundedCornerShape(DesignTokens.CardRadius))
            .padding(DesignTokens.PaddingMd),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(DesignTokens.PaddingMd)
    ) {
        // 图标区域
        icon()
        
        // 文字区域
        Column(verticalArrangement = Arrangement.spacedBy(DesignTokens.PaddingSm)) {
            Text(
                text = title,
                fontSize = DesignTokens.TitleSize,
                color = DesignTokens.PrimaryText,
                fontWeight = FontWeight.Medium
            )
            subtitle?.let {
                Text(
                    text = it,
                    fontSize = DesignTokens.SubtitleSize,
                    color = DesignTokens.SecondaryText
                )
            }
        }
    }
}

4. 在界面中使用组件 #

直接在你的Compose屏幕里调用组件：

@Composable
fun DemoScreen() {
    Column(
        modifier = Modifier.fillMaxSize().padding(DesignTokens.PaddingMd),
        verticalArrangement = Arrangement.spacedBy(DesignTokens.PaddingMd)
    ) {
        FigmaListItem(
            icon = { Icon(Icons.Filled.Person, contentDescription = "用户图标") },
            title = "个人信息",
            subtitle = "编辑头像与昵称"
        )
        FigmaListItem(
            icon = { Icon(Icons.Filled.Settings, contentDescription = "设置图标") },
            title = "系统设置",
            subtitle = "调整通知与隐私"
        )
    }
}

5. 适配交互状态 #

如果设计稿包含禁用、点击反馈等状态，补充对应逻辑：

@Composable
fun FigmaListItem(
    icon: @Composable () -> Unit,
    title: String,
    subtitle: String? = null,
    onClick: () -> Unit = {},
    isEnabled: Boolean = true,
    modifier: Modifier = Modifier
) {
    val adjustedModifier = if (isEnabled) {
        modifier.clickable(onClick = onClick)
    } else {
        modifier.alpha(0.6f)
    }
    
    Row(
        modifier = adjustedModifier
            .fillMaxWidth()
            .padding(DesignTokens.PaddingMd)
            .background(DesignTokens.CardBg, RoundedCornerShape(DesignTokens.CardRadius))
            .border(
                1.dp,
                if (isEnabled) DesignTokens.BorderColor else Color.Gray,
                RoundedCornerShape(DesignTokens.CardRadius)
            )
            .padding(DesignTokens.PaddingMd),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(DesignTokens.PaddingMd)
    ) {
        icon()
        Column(verticalArrangement = Arrangement.spacedBy(DesignTokens.PaddingSm)) {
            Text(
                text = title,
                fontSize = DesignTokens.TitleSize,
                color = if (isEnabled) DesignTokens.PrimaryText else Color.Gray,
                fontWeight = FontWeight.Medium
            )
            subtitle?.let {
                Text(
                    text = it,
                    fontSize = DesignTokens.SubtitleSize,
                    color = if (isEnabled) DesignTokens.SecondaryText else Color.Gray
                )
            }
        }
    }
}

提示 #

如果你的Figma设计稿是其他类型组件（比如卡片、按钮、表单输入框），只需要调整布局结构和样式常量即可：

• 卡片：用Box作为容器，添加阴影、背景
• 按钮：基于Button组件自定义样式
• 输入框：基于OutlinedTextField修改边框、文字样式

内容的提问来源于stack exchange，提问作者PNT