Jetpack Compose对话框单选按钮与文本垂直对齐异常问题

对话框内的Text组件与RadioButton单选按钮无法实现精确垂直对齐，调整各代码模块中的padding内边距参数均未产生任何效果。

问题复现代码 #

@Composable
fun CommonDialog(
    title: String?,
    state: MutableState<Boolean>,
    content: @Composable (() -> Unit)? = null
) {
    AlertDialog(
        onDismissRequest = {
            state.value = false
        },
        title = title?.let {
            {
                Column(
                    Modifier.fillMaxWidth(),
                    verticalArrangement = Arrangement.spacedBy(5.dp)
                ) {
                    Text(text = title)
                }
            }
        },
        text = content,
        confirmButton = {
            TextButton(onClick = { state.value = false }) {
                Text(stringResource(id = R.string.button_cancel))
            }
        }, modifier = Modifier.padding(vertical = 5.dp)
    )
}

@Composable
fun AlertSingleChoiceView(state: MutableState<Boolean>) {
    CommonDialog(title = stringResource(id = R.string.theme), state = state) {
        SingleChoiceView()
    }
}

@Composable
fun SingleChoiceView() {
    val radioOptions = listOf(
        stringResource(id = R.string.straight),
        stringResource(id = R.string.curly),
        stringResource(id = R.string.wavy))
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[2]) }
    Column(
        Modifier.fillMaxWidth()
    ) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = {
                            onOptionSelected(text)
                        }
                    )
                    .padding(vertical = 5.dp)
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = { onOptionSelected(text) }
                )
                Text(
                    text = text
                )
            }
        }
    }
}

当前运行效果 #

包裹单选按钮和文本的Row组件未显式指定垂直对齐规则，默认使用顶部对齐；再加上市面组件库中RadioButton自带默认的最小触控热区尺寸，会让组件实际占位和视觉尺寸不一致，仅调整padding只能修改间距，无法改变子组件的对齐逻辑，自然没有效果。

1. 给Row组件添加verticalAlignment = Alignment.CenterVertically参数，让行内所有子组件先按垂直居中规则排列
2. 若需要实现视觉上的严格对齐，给RadioButton和Text分别添加基线对齐修饰符，对齐文本第一行基线，完全消除高低差

修复后核心代码 #

radioOptions.forEach { text ->
    Row(
        Modifier
            .fillMaxWidth()
            .selectable(
                selected = (text == selectedOption),
                onClick = {
                    onOptionSelected(text)
                }
            )
            .padding(vertical = 5.dp),
        // 指定行内子组件垂直居中对齐
        verticalAlignment = Alignment.CenterVertically
    ) {
        RadioButton(
            selected = (text == selectedOption),
            onClick = { onOptionSelected(text) },
            // 参与基线对齐
            modifier = Modifier.alignByBaseline()
        )
        Text(
            text = text,
            // 按文本第一基线对齐
            modifier = Modifier.alignBy(FirstBaseline)
        )
    }
}

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