无法在 Jetpack Compose 中对齐文本和 Row lambda 中的开关

Question

问题

我试图将文本Enable Notifications 和开关对齐在同一行上。如果我要使用 XML 布局，那么我会使用约束布局，但我正在尝试弄清楚如何使用 Compose 来做到这一点。

设置

@Composable
fun Settings() {
    val viewModel: SettingsViewModel = viewModel()
    val uiState: SettingsState = viewModel.uiState.collectAsState().value
    SettingsList(uiState = uiState, viewModel)
}

@Composable
fun SettingsList(uiState: SettingsState, viewModel: SettingsViewModel, modifier: Modifier = Modifier) {
    val scaffoldState = rememberScaffoldState()
    Scaffold(
        modifier = Modifier, scaffoldState = scaffoldState,
        backgroundColor = MaterialTheme.colors.background,
        topBar = {
            TopAppBar(
                modifier = Modifier.semantics {
                    heading()
                },
                backgroundColor = MaterialTheme.colors.surface,
                contentPadding = PaddingValues(start = 12.dp)
            ) {
                Icon(
                    tint = MaterialTheme.colors.onSurface,
                    imageVector = Icons.Default.ArrowBack,
                    contentDescription = stringResource(id = R.string.header_settings_back)
                )
                Spacer(modifier = modifier.width(16.dp))
                Text(
                    text = stringResource(id = R.string.header_settings),
                    fontSize = 18.sp,
                    color = MaterialTheme.colors.onSurface
                )
            }
        }
    ) {
        val scrollState = rememberScrollState()
        Column(
            modifier = Modifier
                .verticalScroll(scrollState).padding(paddingValues = it)
        ) {
            NotificationSettingsComposable(uiState.notificationsEnabled, {
                viewModel.toggleNotificationSettings()
            }, Modifier.fillMaxWidth())
        }
    }
}

@Composable
fun NotificationSettingsComposable(checked: Boolean, onCheckedChanged: (Boolean) -> Unit, modifier: Modifier = Modifier) {
    Surface(modifier = modifier.padding(12.dp)) {
        Row {
            Text(
                text = stringResource(id = R.string.body_enable_notifications), fontSize = 16.sp,
                color = MaterialTheme.colors.onSurface,
            )
            Switch(checked = checked, onCheckedChange = onCheckedChanged, modifier = Modifier.align(Alignment.Top))
        }
    }
}

但是，文本和开关未在同一行上对齐。

期望的结果

文本和开关应如图所示对齐在同一行上。

这就是我得到的

我想要达到的目标

Answer 1

在行中添加verticalAlignment = Alignment.CenterVertically：

就像是：

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "Enable Notification", fontSize = 16.sp,
    )

    Switch(
        checked = checkedState.value,
        onCheckedChange = { checkedState.value = it }
    )
}