如何在子尺寸动态变化时使 Dialog 重新测量？

Question

我在 Android.

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

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

变量 isRehearsal 在用户单击按钮时切换，当用户单击按钮并切换 isRehearal 时更改按钮工作正常。

问题是，当 isRehearsal 的初始值为 false 并且后来变量变为 true 时，警告文本不会出现。当我将 isRehearsal 的初始值更改为 true 时，当 isRehearsal 变为 false 或 true.[=28 时文本 disappears/appears 很好=]

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

最上面的 Dialog 视图大小似乎在第一次重组后没有更新。这是一个 known bug.

作为解决方法，直到它被修复，您可以使透明的最顶层视图采用所有可用尺寸，并像 dismissOnClickOutside 选项一样处理点击：

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

Answer 2

您可以将 DialogProperties() 与

一起使用

usePlatformDefaultWidth = false

作为解决方法。示例：

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

如何在子尺寸动态变化时使 Dialog 重新测量？

How to make Dialog re-measure when a child size changes dynamically?

android

kotlin

android-jetpack-compose