当子尺寸动态变化时，如何使对话框重新测量？

Question

我在 Android 上使用 Jetpack Compose 实现了一个简单的对话框。

我试图在 时显示警告isRehearsal消息true。

isRehearsal当用户单击按钮时，变量会被切换，并且当用户单击按钮和切换时，更改按钮效果很好isRehearal。

问题是，当 的初始值为isRehearsalisfalse并且后来变量变为时，警告文本不会出现true。isRehearsal当我将的初始值更改为 时true，文本会在isRehearsal变为false或时消失/显示正常true。

var isRehearsal by remember { mutableStateOf(false) }
Dialog(
    onDismissRequest = { dismiss() },
    DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = true)
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(White, shape = RoundedCornerShape(8.dp))
            .fillMaxWidth()
            .padding(12.dp)
    ) { // the box does not resize when the caution text appears dynamically.
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(4.dp)
        ) {
            Text(text = "Set speed")
            Row(
                horizontalArrangement = Arrangement.SpaceEvenly,
                modifier = Modifier.fillMaxWidth()
            ) {
                if (isRehearsal) {
                    Button(
                        onClick = { isRehearsal = false },
                        colors = ButtonDefaults.buttonColors(
                            backgroundColor = Colors.Red400
                        )
                    ) {
                        Text(text = "Rehearsal ON")
                    }
                } else {
                    Button(
                        onClick = { isRehearsal = true },
                        colors = ButtonDefaults.buttonColors(
                            backgroundColor = Colors.Green400
                        )
                    ) {
                        Text(text = "Rehearsal OFF")
                    }
                }
                Button(onClick = { onClickStart(pickerValue) }) {
                    Text(text = "Start")
                }
            }
            if (isRehearsal) { // BUG!! when the intial value of isRehearsal is false, then the text never appears even when the value becomes true.
                Text(text = "Rehearsal does not count as high score") // <- The caution text
            }
        }
    }
}

我应该如何更改Box块以使框的高度正确延伸，以便能够在视图动态显示时包裹警告文本？

编辑 如果我将注意消息部分更改为如下所示，即使 的初始值为 ，文本也会显示isRehearsal正常false。因此，我认为问题在于可组合项的高度Box。

if (isRehearsal) {
    Text(text = "Rehearsal does not count as high score")
} else {
    Spacer(modifier = Modifier.height(100.dp))
}

Answer 1

您可以将 DialogProperties() 与

使用平台默认宽度 = false

作为解决方法。例子：

Dialog(
    onDismissRequest = {},
    properties = DialogProperties(usePlatformDefaultWidth = false)
) {
   Card(modifier = Modifier.padding(8.dp).wrapContentSize().animateContentSize()) {
        // content
  }
}

Answer 2

看起来最上面的Dialog视图大小在第一次重组后没有更新。这是一个已知的错误。

作为修复之前的解决方法，您可以使透明的最顶层视图采用所有可用大小，并像dismissOnClickOutside选项一样处理点击：

Dialog(
    onDismissRequest = { },
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .fillMaxSize()
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null,
            ) {
                // same action as in onDismissRequest
            }
    ) {
        // content
    }
}