Jetpack Compose中Composable间通信：多层底部弹窗交互优化方案咨询

核心思路 #

把弹窗的显隐状态、需要传递的共享数据统一放到ViewModel中，所有页面/弹窗组件直接与ViewModel交互，避免层层传递回调和零散的State变量。这种方式能让组件解耦，逻辑更集中，后续修改交互流程也更灵活。

代码实现示例 #

1. 定义ViewModel管理状态与数据

import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

class SheetViewModel : ViewModel() {
    // 弹窗显隐状态
    private val _sheet1Visible = MutableStateFlow(false)
    val sheet1Visible: StateFlow<Boolean> = _sheet1Visible

    private val _sheet2Visible = MutableStateFlow(false)
    val sheet2Visible: StateFlow<Boolean> = _sheet2Visible

    // 共享数据：Main传给Sheet2，再由Sheet2传给Sheet1
    private val _sharedData = MutableStateFlow<String?>(null)
    val sharedData: StateFlow<String?> = _sharedData

    // 打开Sheet1
    fun openSheet1() {
        viewModelScope.launch {
            _sheet1Visible.emit(true)
        }
    }

    // 从Sheet1打开Sheet2
    fun openSheet2FromSheet1() {
        viewModelScope.launch {
            _sheet2Visible.emit(true)
        }
    }

    // 关闭所有弹窗（从Sheet2触发）
    fun closeAllSheets() {
        viewModelScope.launch {
            _sheet2Visible.emit(false)
            _sheet1Visible.emit(false)
        }
    }

    // 从Main打开Sheet2并传递数据
    fun openSheet2WithData(data: String) {
        viewModelScope.launch {
            _sharedData.emit(data)
            _sheet2Visible.emit(true)
        }
    }

    // Sheet2完成数据传递，关闭自身（Sheet1会自动读取更新后的sharedData）
    fun passDataToSheet1AndCloseSheet2() {
        viewModelScope.launch {
            _sheet2Visible.emit(false)
        }
    }
}

2. MainScreen实现

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun MainScreen(viewModel: SheetViewModel = viewModel()) {
    val sheet1Visible = viewModel.sheet1Visible.collectAsState().value
    val sheet2Visible = viewModel.sheet2Visible.collectAsState().value

    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        // 打开Sheet1的按钮
        Button(onClick = viewModel::openSheet1) {
            Text(text = "打开Sheet1")
        }

        // 传数据到Sheet2的按钮
        Button(
            onClick = { viewModel.openSheet2WithData("来自Main的测试数据") },
            modifier = Modifier.align(Alignment.BottomCenter)
        ) {
            Text(text = "传数据到Sheet2")
        }

        // 显示Sheet1
        if (sheet1Visible) {
            ModalBottomSheet1(
                onOpenSheet2 = viewModel::openSheet2FromSheet1,
                sharedData = viewModel.sharedData.collectAsState().value
            )
        }

        // 显示Sheet2（覆盖在Sheet1之上）
        if (sheet2Visible) {
            ModalBottomSheet2(
                onCloseAll = viewModel::closeAllSheets,
                onPassDataToSheet1 = viewModel::passDataToSheet1AndCloseSheet2,
                receivedData = viewModel.sharedData.collectAsState().value
            )
        }
    }
}

3. ModalBottomSheet1实现

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Button
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun ModalBottomSheet1(
    onOpenSheet2: () -> Unit,
    sharedData: String?
) {
    ModalBottomSheet(onDismissRequest = { /* 可添加单独关闭Sheet1的逻辑 */ }) {
        Column(modifier = Modifier.fillMaxWidth()) {
            sharedData?.let {
                Text(text = "从Sheet2收到的数据：$it")
            } ?: run {
                Text(text = "Sheet1默认内容")
            }
            Button(onClick = onOpenSheet2) {
                Text(text = "打开Sheet2")
            }
        }
    }
}

4. ModalBottomSheet2实现

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Button
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun ModalBottomSheet2(
    onCloseAll: () -> Unit,
    onPassDataToSheet1: () -> Unit,
    receivedData: String?
) {
    ModalBottomSheet(onDismissRequest = { /* 可添加单独关闭Sheet2的逻辑 */ }) {
        Column(modifier = Modifier.fillMaxWidth()) {
            receivedData?.let {
                Text(text = "从Main收到的数据：$it")
            } ?: run {
                Text(text = "Sheet2默认内容")
            }
            Button(onClick = onCloseAll) {
                Text(text = "关闭所有弹窗回到Main")
            }
            Button(onClick = onPassDataToSheet1) {
                Text(text = "传数据到Sheet1并关闭自己")
            }
        }
    }
}

方案优势 #

• 状态集中可控：所有弹窗状态和共享数据都在ViewModel中维护，避免组件间状态不一致的问题。
• 消除回调嵌套：组件无需直接传递回调，通过调用ViewModel的方法触发操作，代码结构更简洁。
• 组件解耦：每个组件只关注自身UI和与ViewModel的交互，修改单个组件逻辑不会影响其他部分。
• 数据传递清晰：共享数据通过Flow自动同步，组件能实时响应数据变化更新UI，无需手动处理数据传递逻辑。

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