Jetpack Compose AlertDialog内onClick调用方法不触发重组问题

问题现象 #

编写了用于清空guessArray列表、移除视图内所有文本的newGame()函数，该函数在其他Composable任意位置调用均可正常触发界面更新，但在AlertDialog的onClick回调中调用时无法触发重组。

相关代码片段 #

状态变量定义 #

var guessArray = List(5) { List(6) { CardData("", Color.White) }.toMutableStateList() }
private var column = 0
private var greenLetterList = mutableListOf<String>()
private var yellowLetterList = mutableListOf<String>()
private var grayLetterList = mutableListOf<String>()

newGame()函数实现 #

fun newGame() {
    greenLetterList.clear()
    grayLetterList.clear()
    yellowLetterList.clear()
    guessArray = List(5) { List(6) { CardData("", Color.White) }.toMutableStateList() }
    currentRow = 0
    column = 0
}

异常调用场景（AlertDialog内） #

@Composable
fun GameEndPopUp(viewModel: HomeViewModel) {
    val openDialog = remember { mutableStateOf(viewModel.gameIsInPlay) }
    if (!openDialog.value.value) {
        AlertDialog(
            onDismissRequest = { openDialog.value.value = true },
            confirmButton = {
                TextButton(
                    onClick = {
                        openDialog.value.value = true
                        // 此处调用不触发重组
                        viewModel.newGame()
                    },
                    modifier = Modifier
                        .width(53.dp)
                        .height(50.dp),
                )
                { Text(text = "Next Word") }
            }
        )
    }
}

正常调用场景（普通Button内） #

@Composable
fun MyEnterButton(viewModel: HomeViewModel) {
    val coroutineScope = rememberCoroutineScope()
    val mContext = LocalContext.current

    Button(
        onClick = {
            if (viewModel.gameIsInPlay.value) {
                coroutineScope.launch {
                    if (viewModel.checkWordExists()) {
                        viewModel.checkLetterPlacementIsCorrect()
                        viewModel.checkKeyboard()
                        // 此处调用可正常触发重组
                        viewModel.newGame()
                    } else {
                        viewModel.toastWordNotFound(mContext)
                    }
                }
            }
        }
    )
}

核心疑问 #

• 是否是AlertDialog组件本身的特殊机制导致该问题？

问题根因 #

该问题和AlertDialog组件本身机制无关，是状态声明错误+Dialog控制逻辑错误共同导致的：

1. 状态不可观察：除了guessArray内层的列表用了toMutableStateList()，其余变量（guessArray外层引用、column、currentRow、三个颜色字母列表）都是普通Kotlin变量，没有用mutableStateOf/mutableStateListOf包裹为Compose可观察状态。普通Button场景下能生效是巧合：点击后调用的checkLetterPlacementIsCorrect()、checkKeyboard()方法会修改其他可观察状态，顺带触发了全局重组；而AlertDialog点击逻辑中没有其他可触发重组的操作，修改普通变量不会被Compose感知。
2. Dialog控制逻辑错误：openDialog被定义为MutableState<MutableState<Boolean>>的两层嵌套结构，点击确认按钮时先执行openDialog.value.value = true，会直接把AlertDialog从视图树中立即移除，后续执行的newGame()没有重组触发契机，界面自然不会更新。

修复方案 #

1. 修正状态声明，所有需要驱动UI更新的变量都声明为Compose可观察状态

   // 外层引用用mutableStateOf包裹，赋值时可被观察
   var guessArray by mutableStateOf(
       List(5) { List(6) { CardData("", Color.White) }.toMutableStateList() }
   )
   var column by mutableIntStateOf(0)
   var currentRow by mutableIntStateOf(0)
   // 列表用mutableStateListOf，内容/结构变化可被观察
   val greenLetterList = mutableStateListOf<String>()
   val yellowLetterList = mutableStateListOf<String>()
   val grayLetterList = mutableStateListOf<String>()
   // 游戏运行状态确保是MutableState<Boolean>类型
   val gameIsInPlay = mutableStateOf(true)
   

2. 修正Dialog控制逻辑，去掉多余的State嵌套，通过游戏状态直接控制Dialog显隐

   @Composable
   fun GameEndPopUp(viewModel: HomeViewModel) {
       // 直接读取游戏状态，不需要额外套一层remember
       val gameIsInPlay by viewModel.gameIsInPlay
       if (!gameIsInPlay) {
           AlertDialog(
               onDismissRequest = { /* 游戏结束弹窗禁止点击外部关闭 */ },
               confirmButton = {
                   TextButton(
                       onClick = {
                           // 直接调用newGame，状态更新后gameIsInPlay变为true，Dialog会自动消失
                           viewModel.newGame()
                       },
                       modifier = Modifier
                           .width(53.dp)
                           .height(50.dp),
                   ) {
                       Text(text = "Next Word")
                   }
               }
           )
       }
   }
   

3. 在newGame()中补充游戏状态重置逻辑

   fun newGame() {
       greenLetterList.clear()
       grayLetterList.clear()
       yellowLetterList.clear()
       guessArray = List(5) { List(6) { CardData("", Color.White) }.toMutableStateList() }
       currentRow = 0
       column = 0
       // 重置游戏状态为进行中，触发Dialog隐藏和主界面更新
       gameIsInPlay.value = true
   }
   

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