Jetpack Compose中Row内Text与Switch组件无法正确垂直居中对齐问题求助

嘿，我最近跟着Android官方培训课程写示例代码的时候，卡到一个小细节上了😤。我想让Row里的Text组件和Switch组件垂直对齐，但不管怎么调，Switch总是比Text稍微高一点，看起来特别别扭。我特意写了个简单的Demo来复现这个问题：界面是一个Column，里面先放一个Text，然后是一个包含Text和Switch的Row，最后再放一个Text。现在就卡在这个Row里的两个组件对齐上了。

我的代码是这样的：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Switch
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.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp)
            ) {
                Text(text = "顶部文本")
                
                var isChecked by remember { mutableStateOf(false) }
                Row(
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(text = "是否开启功能")
                    Switch(
                        checked = isChecked,
                        onCheckedChange = { isChecked = it }
                    )
                }
                
                Text(text = "底部文本")
            }
        }
    }
}

有没有大佬能指点一下，怎么让这两个组件完美垂直对齐啊？

补充：亲测有效的解决方案 #

后来我琢磨了下，也查了相关问题，发现几个可行的办法：

• 方法一：给Row设置垂直居中属性
  这是最直接的解决方式，只需要在Row的参数里加上verticalAlignment = Alignment.CenterVertically，让Row内部的所有子元素都垂直居中对齐：

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically // 关键配置
) {
    Text(text = "是否开启功能")
    Switch(
        checked = isChecked,
        onCheckedChange = { isChecked = it }
    )
}

• 方法二：对齐基线（针对细微错位）
  如果设置了垂直居中还是有一点点错位，可以尝试让两个组件对齐基线，给Text和Switch都加上Modifier.alignByBaseline()：

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "是否开启功能",
        modifier = Modifier.alignByBaseline()
    )
    Switch(
        checked = isChecked,
        onCheckedChange = { isChecked = it },
        modifier = Modifier.alignByBaseline()
    )
}

• 方法三：微调Switch的内边距
  有时候Switch本身的默认内边距会导致偏移，可以手动调整它的padding来修正位置，比如：

Switch(
    checked = isChecked,
    onCheckedChange = { isChecked = it },
    modifier = Modifier.padding(top = 2.dp) // 根据实际情况微调数值
)

一般来说，方法一就足够解决大部分情况了，推荐先试试这个~

备注：内容来源于stack exchange，提问作者gordon