Jetpack Compose：点击LazyColumn元素如何向BottomSheetScaffold传递数据

要完成点击列表项打开底部面板并传递数据的需求，核心是借助Compose的状态管理联动列表点击事件与底部面板状态，具体实现步骤如下：

1. 定义状态变量 #

在Composable函数作用域内，声明两个关键状态：

• 存储选中的列表项数据
• 控制底部面板的展开/收起状态（可直接复用scaffoldState内置的bottomSheetState）

示例代码：

// 假设标题数据类型为String，可根据实际业务替换类型
val selectedTitle = remember { mutableStateOf<String?>(null) }
val scaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = rememberStandardBottomSheetState(initialValue = SheetValue.Hidden)
)
val coroutineScope = rememberCoroutineScope()

2. 处理列表项点击事件 #

在Text的clickable Lambda中，先保存选中的标题数据，再通过协程触发底部面板展开（因为BottomSheet状态更新需要在协程中执行）：

.clickable {
    // 记录当前选中的标题
    selectedTitle.value = title
    // 协程内展开底部面板
    coroutineScope.launch {
        scaffoldState.bottomSheetState.expand()
    }
}

3. 传递数据给BottomSheetContent #

修改sheetContent中的BottomSheetContent调用逻辑，将选中的标题作为参数传入，同时处理未选中时的边界情况：

sheetContent = {
    selectedTitle.value?.let { selected ->
        BottomSheetContent(title = selected)
    } ?: run {
        // 可选：未选中任何项时的占位UI
        Text(text = "请选择一个标题")
    }
}

完整修改后的代码 #

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {
        selectedTitle.value?.let { selected ->
            BottomSheetContent(title = selected)
        } ?: Text(text = "请选择一个标题")
    },
    sheetContainerColor = White,
    sheetDragHandle = sheetDragHandle,
    sheetPeekHeight = 0.dp
) {
    LazyColumn(modifier = Modifier.background(color = Gray6)) {
        items(titleService) { title ->
            Text(
                text = title.uppercase(), 
                modifier = Modifier
                    .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 8.dp)
                    .clickable {
                        selectedTitle.value = title
                        coroutineScope.launch {
                            scaffoldState.bottomSheetState.expand()
                        }
                    },
                fontSize = 16.sp,
                fontFamily = TTNormsFontFamily,
                fontWeight = FontWeight.Medium,
                fontStyle = FontStyle.Normal,
                color = Gray1
            )
        }
    }
}

最后需要确保BottomSheetContent组件支持接收数据参数，示例定义如下：

@Composable
fun BottomSheetContent(title: String) {
    // 这里使用传入的title数据构建底部面板UI
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "选中的标题：$title", fontSize = 18.sp)
        // 其他底部面板内容
    }
}

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