Jetpack Compose中修改变量后MarkerInfoWindow内容未重组问题

问题分析 #

在使用Jetpack Compose开发地图应用时，编辑地图标记标题后，MarkerInfoWindowContent始终显示旧标题，核心原因有两点：

• 自定义_Marker类的属性是普通变量，Compose无法感知其变化，无法触发UI重组
• drawPlace中使用局部remember的title变量，与_Marker的属性状态不同步，导致UI无法同步更新

解决方案 #

1. 将_Marker改为可观察状态类 #

把_Marker的title和desc属性改为mutableStateOf，让Compose能感知属性变化：

class _Marker(
    val lat: Double,
    val long: Double,
    title: String = "",
    desc: String = ""
) {
    var title by mutableStateOf(title)
    var desc by mutableStateOf(desc)
}

2. 调整drawPlace组件，绑定可观察状态 #

移除局部title变量，直接使用_Marker的可观察属性，确保UI与数据源同步：

@Composable
fun drawPlace(info: _Marker) {
    var showEdit by remember { mutableStateOf(false) }

    MarkerInfoWindowContent(
        state = MarkerState(position = LatLng(info.lat, info.long)),
        onInfoWindowClick = { showEdit = true },
    ) {
        Column {
            Text(text = info.title)
        }

        if (showEdit) {
            editPlace(info, { newTitle, newDesc ->
                info.title = newTitle
                info.desc = newDesc
            }) { showEdit = false }
        }
    }
}

3. 修复对话框的初始值同步问题 #

确保每次打开编辑对话框时，获取_Marker的最新属性值，避免显示旧内容：

@Composable
fun editPlace(info: _Marker, save: (String, String) -> Unit, onDismissRequest: () -> Unit) {
    var title by remember { mutableStateOf(info.title) }
    var desc by remember { mutableStateOf(info.desc) }

    // 每次对话框显示时，重置为最新的标记内容
    LaunchedEffect(Unit) {
        title = info.title
        desc = info.desc
    }

    Dialog(
        onDismissRequest = { onDismissRequest() },
        properties = DialogProperties(dismissOnClickOutside = true)
    ) {
        Card {
            TextField(
                value = title,
                onValueChange = { title = it },
                label = { Text("标题") }
            )
            TextField(
                value = desc,
                onValueChange = { desc = it },
                label = { Text("描述") }
            )

            Row(modifier = Modifier.padding(horizontal = 8.dp, vertical = 16.dp)) {
                TextButton(
                    onClick = {
                        save(title, desc)
                        onDismissRequest()
                    }
                ) {
                    Text("保存")
                }
            }
        }
    }
}

4. 确保Marker实例不被重复创建 #

在GoogleMap组件中，用remember保存_Marker实例，避免每次重组重新创建对象：

GoogleMap(
    modifier = modifier,
    cameraPositionState = cameraPositionState
) {
    val marker by remember { mutableStateOf(_Marker(1.35, 103.87)) }
    drawPlace(marker)
}

原理说明 #

• 当_Marker的title属性被修改时，mutableStateOf会通知Compose触发重组，MarkerInfoWindowContent中的Text(info.title)会自动更新为新值
• 移除局部title变量后，UI直接绑定数据源的可观察状态，避免了状态不同步的问题
• LaunchedEffect确保每次打开对话框时，都会从_Marker获取最新内容，保证编辑的是当前标记的最新值

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