Compose中Dialog显示异常：错误提示导致按钮被截断

我实现了一个供用户输入邮箱地址的Compose Dialog，当邮箱验证不通过时会在下方显示错误提示信息。但显示错误提示时，按钮被截断，Dialog并未自动调整空间适配内容，不过预览显示正常。

相关错误提示代码片段：

if(!isEmailVerifiedSuccess) {
    Text(
        modifier = Modifier.fillMaxWidth(),
        textAlign = TextAlign.Center,
        text = stringResource(R.string.email_verify_failed),
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        color = MaterialTheme.colorScheme.error
    )
}

完整Dialog代码：

fun AddVisitorDialog(
    email: String,
    isEmailVerifiedSuccess: Boolean,
    onEmailChanged: (email: String) -> Unit,
    onDialogClose: () -> Unit,
    isValidInput: Boolean,
    onAddButtonClicked: (email: String) -> Unit,
    modifier: Modifier = Modifier) {

    Dialog(onDismissRequest = { onDialogClose() }) {
        Column(
            modifier = modifier,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            IconButton(
                modifier = Modifier.align(Alignment.End),
                onClick = {
                    onDialogClose()
                }) {
                Icon(
                    painter = painterResource(id = R.drawable.close),
                    contentDescription = "close button"
                )
            }

            Text(
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center,
                text = stringResource(R.string.add_visitor),
                fontWeight = FontWeight.Bold,
                fontSize = 20.sp,
                color = MaterialTheme.colorScheme.agendaSubTitleHeaderColor
            )

            Spacer(modifier = Modifier.height(30.dp))

            UserInputTextField(
                modifier = Modifier.fillMaxWidth(),
                isInputValid = isValidInput,
                inputValue = email,
                placeholderText = stringResource(id = R.string.email_address),
                onInputChange = { newEmail ->
                    onEmailChanged(newEmail)
                }
            )

            if(!isEmailVerifiedSuccess) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = stringResource(R.string.email_verify_failed),
                    fontWeight = FontWeight.Normal,
                    fontSize = 16.sp,
                    color = MaterialTheme.colorScheme.error
                )
            }

            Spacer(modifier = Modifier.height(30.dp))

            TaskButton(
                modifier = Modifier.fillMaxWidth(),
                buttonText = stringResource(R.string.add),
                onButtonClick = {
                    onAddButtonClicked(email)
                }
            )
        }
    }
}

问题核心是Dialog内部的Column未正确处理动态内容的高度适配，新增错误提示后内容超出可视范围，可通过以下方式修复：

• 给Column添加自适应高度约束
  给Column添加wrapContentHeight()确保高度随内容变化，同时限制最大宽度并添加内边距，避免内容过宽或紧贴边缘：

  Column(
      modifier = modifier
          .wrapContentHeight()
          .fillMaxWidth(0.9f)
          .padding(16.dp),
      horizontalAlignment = Alignment.CenterHorizontally
  )
  

• 用Surface包裹内容
  Compose默认Dialog直接嵌套Column时，可能无法自动调整高度。用Surface包裹Column，它会根据内容自动适配尺寸，同时还能提供统一的圆角和背景样式：

  Dialog(onDismissRequest = { onDialogClose() }) {
      Surface(
          shape = MaterialTheme.shapes.medium,
          color = MaterialTheme.colorScheme.surface
      ) {
          Column(
              modifier = modifier
                  .wrapContentHeight()
                  .fillMaxWidth(0.9f)
                  .padding(16.dp),
              horizontalAlignment = Alignment.CenterHorizontally
          ) {
              // 原有内容...
          }
      }
  }
  

• 优化错误提示的间距
  在错误提示文本和上方TextField之间添加小间距，避免内容拥挤：

  UserInputTextField(/*原有参数*/)
  
  if(!isEmailVerifiedSuccess) {
      Spacer(modifier = Modifier.height(8.dp))
      Text(/*错误提示内容*/)
  }
  

修改后，Dialog会根据动态内容自动调整高度，按钮就不会被截断了。

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