Jetpack Compose中如何将一个视图的中心与Card视图的顶部对齐？

你可以通过堆叠布局+偏移的方式实现需求，具体实现如下：

效果示例 #

核心实现逻辑 #

• 使用Box作为Card和红色视图的共同父容器，实现元素堆叠
• 红色视图使用offset向上偏移自身高度的一半，即可让红色视图的水平中线和Card的顶部边界完全对齐
• 红色视图的水平居中通过Box的contentAlignment属性直接实现

固定高度实现代码 #

如果你的红色视图高度是固定的，可以直接硬编码偏移值，写法最简单：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun CardDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        verticalArrangement = Arrangement.Center
    ) {
        Box(
            modifier = Modifier.fillMaxWidth(),
            contentAlignment = Alignment.TopCenter
        ) {
            // 原有Card组件
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(15.dp),
                elevation = CardDefaults.cardElevation(defaultElevation = 10.dp),
            ) {
                Column(
                    modifier = Modifier.padding(15.dp)
                ) {
                    Text("Card Title")
                    Text("Card Subtitle")
                    Text("Card Content Line 1")
                    Text("Card Content Line 2")
                }
            }
            // 顶部对齐的红色视图，示例高度为40dp，偏移为-20dp即高度的一半
            Box(
                modifier = Modifier
                    .offset(y = (-20).dp)
                    .size(width = 120.dp, height = 40.dp)
                    .background(Color.Red, RoundedCornerShape(8.dp))
            )
        }
    }
}

动态高度适配代码 #

如果红色视图高度不固定，可以通过onSizeChanged动态获取高度计算偏移量，适配性更好：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp

@Composable
fun CardDemo() {
    var redBoxHeight by remember { mutableStateOf(0.dp) }
    val density = LocalDensity.current
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        verticalArrangement = Arrangement.Center
    ) {
        Box(
            modifier = Modifier.fillMaxWidth(),
            contentAlignment = Alignment.TopCenter
        ) {
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(15.dp),
                elevation = CardDefaults.cardElevation(defaultElevation = 10.dp),
            ) {
                Column(
                    modifier = Modifier.padding(15.dp)
                ) {
                    Text("Card Title")
                    Text("Card Subtitle")
                    Text("Card Content Line 1")
                    Text("Card Content Line 2")
                }
            }
            Box(
                modifier = Modifier
                    .offset(y = -redBoxHeight / 2)
                    .onSizeChanged {
                        redBoxHeight = with(density) { it.height.toDp() }
                    }
                    .size(width = 120.dp, height = 40.dp)
                    .background(Color.Red, RoundedCornerShape(8.dp))
            )
        }
    }
}

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