Material 3 Jetpack Compose：三点按钮与Project X垂直居中对齐问题

问题现状 #

当前AgendaCard组件的三点按钮（OptionButton）与左侧Project X文本无法垂直居中对齐，实际效果如下：

目标是实现Figma设计图中的对齐效果：

问题原因 #

你原本将左侧状态图标+文本和OptionButton分别放在Box的两个独立子节点中，各自设置top padding，没有通过统一容器控制垂直对齐，导致两者垂直位置无法同步。

修改方案 #

将顶部所有元素（状态图标、Project X文本、OptionButton）放入同一个Row容器，利用Row的verticalAlignment属性实现整体垂直居中，同时通过weight属性让左侧内容占据剩余空间，确保OptionButton固定在右侧。

修改后的完整代码 #

@Composable
fun AgendaCard(
    modifier: Modifier = Modifier,
    isAgendaCompleted: Boolean = true
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(120.dp)
            .background(color = Color.Green, shape = RoundedCornerShape(22.dp))
    ) {
        Column {
            // 用统一Row包裹顶部所有元素，实现垂直居中对齐
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 16.dp, top = 16.dp, end = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                val agendaStatusIcon = if (isAgendaCompleted) {
                    painterResource(id = R.drawable.completed)
                } else {
                    painterResource(id = R.drawable.incomplete)
                }
                Icon(painter = agendaStatusIcon, contentDescription = "Agenda status")
                Spacer(modifier = Modifier.width(16.dp))
                // 给Text添加weight，让它占据Row剩余空间，OptionButton自动居右
                Text(text = "Project X", modifier = Modifier.weight(1f))
                OptionButton()
            }
            Spacer(modifier = Modifier.height(14.dp))
            Text(
                modifier = Modifier.padding(start = 48.dp),
                text = "This is the project tasky that needs"
            )
        }
        Text(
            modifier = Modifier.padding(bottom = 12.dp, end = 16.dp).align(Alignment.BottomEnd),
            text = "Mar 5, 10:30 - Mar 5, 11:00"
        )
    }
}

@Composable
fun OptionButton(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colorScheme.DarkOptionButton
) {
    Row(modifier.wrapContentWidth()) {
        Icon(
            painter = painterResource(id = R.drawable.white_dot),
            contentDescription = "option button 1",
            tint = color
        )
        Spacer(modifier = Modifier.width(3.dp))
        Icon(
            painter = painterResource(id = R.drawable.white_dot),
            contentDescription = "option button 2",
            tint = color
        )
        Spacer(modifier = Modifier.width(3.dp))
        Icon(
            painter = painterResource(id = R.drawable.white_dot),
            contentDescription = "option button 3",
            tint = color
        )
    }
}

关键修改点 #

• 移除原Box中独立的两个子节点，替换为包含所有顶部元素的Row容器
• 给Row设置verticalAlignment = Alignment.CenterVertically，确保所有子元素垂直居中
• 为Project X的Text添加Modifier.weight(1f)，使其占据Row剩余空间，迫使OptionButton固定在右侧
• 移除OptionButton单独的top padding，依赖Row的统一padding控制位置

这样修改后，三点按钮就能与左侧文本完美垂直对齐，符合设计要求。

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