行列布局能否覆盖所有设计场景？图标与文本居中对齐问题求助

关于Column+Row布局能否解决所有设计问题 #

不存在任何设计理论支持“Column+Row布局可解决所有设计问题”的说法。这两种线性布局是基础排版工具，能覆盖绝大多数常规场景，但面对复杂需求（比如不规则响应式布局、动态视差效果、自定义路径排版等），还需要结合约束布局、网格布局、自定义布局组件等方案配合实现。

圆点图标与文本、中心线对齐的最优实现方案 #

你的代码结构存在布局层级问题，导致无法实现预期对齐效果。以下是基于Jetpack Compose的修正方案，核心是通过调整布局层级和对齐参数实现行列双向居中：

Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceAround
    ) {
        // 左侧条目：圆点+文本
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(horizontal = 16.dp)
        ) {
            Icon(Icons.Filled.Circle, contentDescription = "圆点图标", modifier = Modifier.size(16.dp))
            Spacer(modifier = Modifier.width(8.dp))
            Text("requirement payment")
        }

        // 中间竖线
        Icon(
            Icons.Filled.VerticalSplit,
            contentDescription = "分隔竖线",
            modifier = Modifier.height(32.dp)
        )

        // 右侧条目：圆点+文本
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(horizontal = 16.dp)
        ) {
            Icon(Icons.Filled.Circle, contentDescription = "圆点图标", modifier = Modifier.size(16.dp))
            Spacer(modifier = Modifier.width(8.dp))
            Text("requirement payment")
        }
    }
}

关键实现要点 #

• 外层Column设置horizontalAlignment = Alignment.CenterHorizontally，确保整个内容块水平居中
• 包裹左右条目和竖线的Row设置verticalAlignment = Alignment.CenterVertically，让三个元素在垂直方向中心线对齐
• 每个条目内部的Row同样设置verticalAlignment = Alignment.CenterVertically，保证圆点图标与文本垂直居中
• 使用Spacer控制圆点和文本的间距，避免视觉拥挤；给竖线设置固定高度，让它与条目的视觉高度匹配

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