如何在 Jetpack Compose 中将视图的基线与另一个视图的顶部对齐？

Question

我有一个卡片视图，我想将另一个视图（图中的红色视图）的中心与卡片的顶部对齐，如图所示。

我该怎么做？卡的代码是这样的：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CardDemo()
        }
    }
}

@Composable
fun CardDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color.LightGray),
        verticalArrangement = Arrangement.Center) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(15.dp),
            elevation = 10.dp,
        ) {
            Column(
                modifier = Modifier.padding(15.dp)
            ) {
                Text("Card Title")
                Text("Card Subtitle")
                Text("Card Content Line 1")
                Text("Card Content Line 2")
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeDemoTheme {
        CardDemo()
    }
}

Answer 1

你应该使用Box

您需要将覆盖视图放在上面，Card否则它会被剪切，所以放在Card里面Box。您也可以使用offset修改器来移动您的视图：

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.LightGray),
    verticalArrangement = Arrangement.Center
) {
    Box(Modifier.padding(15.dp)) {
        val textPadding = 15.dp
        val overlayBoxHeight = 20.dp
        Card(
            elevation = 10.dp,
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Column(
                modifier = Modifier.padding(textPadding)
            ) {
                Text("Card Title")
                Text("Card Subtitle")
                Text("Card Content Line 1")
                Text("Card Content Line 2")
            }
        }
        Box(
            Modifier
                .height(overlayBoxHeight)
                .width(40.dp)
                .offset(x = textPadding, y = -overlayBoxHeight / 2)
                .background(Color.Red)
        )
    }
}