如何在Android Compose的Card组件角落位置添加自定义图标

参考的需求效果如下：

实现思路 #

核心采用Material3提供的滚动联动API实现头部和内容的滚动联动，自定义渐变头部+悬浮头像卡片效果，无需引入第三方库。

前置依赖 #

Module级build.gradle中引入Material3依赖：

dependencies {
    implementation "androidx.compose.material3:material3:1.2.1"
    implementation "androidx.compose.foundation:foundation:1.6.0"
    // 其他基础Compose依赖自行补齐
}

完整实现代码 #

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CollapsibleHeaderScreen() {
    // 初始化头部滚动行为：上滑时先收起头部，下滑时先展开头部
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(
        state = rememberTopAppBarState()
    )
    // 计算滚动进度，用来调整头像位置
    val scrollProgress = scrollBehavior.state.collapsedFraction

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBar(
                title = { Text(text = "个人主页", color = Color.White) },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color.Transparent
                ),
                scrollBehavior = scrollBehavior,
                modifier = Modifier.background(
                    brush = Brush.verticalGradient(
                        colors = listOf(Color(0xFF6200EE), Color(0xFF3700B3))
                    )
                )
            )
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
        ) {
            // 内容列表
            LazyColumn(modifier = Modifier.fillMaxSize()) {
                // 顶部预留头像的占位空间
                item {
                    Spacer(modifier = Modifier.height(60.dp))
                }
                // 模拟列表内容
                items(50) { index ->
                    Text(
                        text = "列表项 $index",
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp),
                        fontSize = 16.sp
                    )
                }
            }
            // 悬浮头像卡片，根据滚动进度调整位置
            Image(
                painter = painterResource(id = R.drawable.ic_avatar), // 替换为自己的头像资源
                contentDescription = "用户头像",
                modifier = Modifier
                    .align(Alignment.TopCenter)
                    .offset(y = (-40).dp * scrollProgress) // 滚动时向上移动头像
                    .size(80.dp)
                    .clip(CircleShape)
                    .background(Color.White)
                    .padding(2.dp)
                    .clip(CircleShape)
            )
        }
    }
}

效果调整说明 #

• 渐变色可以修改Brush.verticalGradient里的颜色值匹配设计需求
• 头像的大小、偏移量可以根据设计稿调整对应的数值
• 滚动行为可以替换为exitUntilCollapsedScrollBehavior实现只有滑到顶部才展开头部的效果

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