Jetpack Compose M3 BottomSheetScaffold sheetContent不随状态更新求助

核心问题根源 #

你的代码存在两个关键问题，导致sheetContent无法随数据更新重组：

1. ViewModel状态无通知能力：var data = mutableListOf<Data>()是普通可变列表，修改元素（add/remove）时不会触发状态变更通知，Compose无法感知数据变化。
2. Compose状态持有错误：remember { mutableStateOf(mainViewModel.data) }仅保存了列表的初始引用，当列表内容修改时，引用本身未改变，Compose认为状态没有更新，因此不会触发sheetContent的重组。

具体修复步骤 #

1. 修正ViewModel中的状态定义

将普通可变列表替换为可观察状态类型，确保数据变化能通知到UI：

// 方案1：使用mutableStateOf（适合单一UI状态场景）
var data by mutableStateOf(emptyList<Data>())
    private set

// 更新数据时必须生成新列表，而非修改原列表
fun updateData(newData: List<Data>) {
    data = newData
}

// 如需添加单个元素：
fun addData(item: Data) {
    data = data + item // 生成新列表触发状态更新
}

或者使用StateFlow（适合跨层状态传递场景）：

private val _data = MutableStateFlow(emptyList<Data>())
val data: StateFlow<List<Data>> = _data

fun updateData(newData: List<Data>) {
    _data.value = newData
}

2. 修正Compose中的状态收集

直接观察ViewModel的可观察状态，无需额外remember包装：

• 若使用mutableStateOf：

val data by mainViewModel.data

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetPeekHeight = 60.dp,
    sheetContent = {
        Logger.d("data1: $data") // 现在数据更新时会触发
        BottomSheetInnerContent(data)
    },
) {
    Logger.d("data2: $data")
    // 其他组件代码
}

• 若使用StateFlow：

val data by mainViewModel.data.collectAsStateWithLifecycle()

BottomSheetScaffold(
    // 同上配置
)

关键注意事项 #

• 永远用不可变集合（List而非MutableList）作为Compose的状态载体，每次更新生成新集合实例，确保状态引用变化能被Compose感知。
• ViewModel中的状态必须使用Jetpack提供的可观察类型（mutableStateOf/StateFlow），禁止直接使用普通可变对象。

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