如何向Jetpack Compose的BottomSheet传递参数？

Question

我正在尝试显示一个模态 BottomSheet，它需要一个参数。这就是我显示 BottomSheet 的方式：

bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)

这是我的设置：

@Composable
fun MainView() {
    val navController = rememberNavController()

    val modalBottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        confirmStateChange = {
            it != ModalBottomSheetValue.HalfExpanded
        }
    )
    ModalBottomSheetLayout(
        sheetState = modalBottomSheetState,
        sheetContent = {
            AnimationScreen()
        },
        sheetShape = RoundedCornerShape(topStart = Radius.l, topEnd = Radius.l)
    ) {
        Scaffold(
            bottomBar = {
                BottomBar(navController)
            }
        ) {
            BottomBarMain(navController, modalBottomSheetState) 
        }
    }
}

所以，我的问题是：向此传递参数的好方法是什么

ModalBottomSheet

。

---

我有一个可能的解决方案，但我不知道这是否是正确的方法。这是它的样子：

var animationId by remember { mutableStateOf(-1L) }

...
sheetContent = {
    AnimationScreen(animationId)
}
...
BottomBarMain(navController, modalBottomSheetState) {
    animationId = it
}

Answer 1

Material ModalBottomSheetLayout 实际上没有任何 api。

您找到的解决方案有效并且可以像这样使用。

另外，你还可以这样做：

class MyModalBottomSheetState<T : Any> @OptIn(ExperimentalMaterialApi::class) constructor(
val modalBottomSheetState: ModalBottomSheetState) {
var data: MutableState<T?> = mutableStateOf(null)

@OptIn(ExperimentalMaterialApi::class)
suspend fun openModal(data: T) {
    this.data.value = data
    if (!modalBottomSheetState.isVisible)
        modalBottomSheetState.show()
}

@OptIn(ExperimentalMaterialApi::class)
suspend fun closeModal() {
    this.data.value = null
    if (modalBottomSheetState.isVisible)
        modalBottomSheetState.hide()
}
}


@OptIn(ExperimentalMaterialApi::class)
@Composable
fun <T : Any> rememberMyModalBottomSheetState(
modalBottomSheetState: ModalBottomSheetState,
): MyModalBottomSheetState<T> {
return MyModalBottomSheetState(modalBottomSheetState)
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MainView() {

val modalBottomSheetState =
    rememberModalBottomSheetState(initialValue 
= ModalBottomSheetValue.Hidden,
        confirmValueChange = {
            it != ModalBottomSheetValue.HalfExpanded
        }
    )

val myModalBottomSheetState = 
rememberMyModalBottomSheetState<String> 
(modalBottomSheetState)


var textValue by remember {
    mutableStateOf("")
}
val scope = rememberCoroutineScope()
ModalBottomSheetLayout(
    sheetState = myModalBottomSheetState.modalBottomSheetState,
    sheetContent = {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(400.dp), contentAlignment = Alignment.Center
        ) {
            Text(text = myModalBottomSheetState.data.value ?: "null")
        }
    },
) {
    Scaffold(
    ) {
        Box(
            modifier = Modifier
                .padding(it)
                .fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column {
                TextField(
      value = textValue,
      onValueChange = { v -> textValue = v })

                Text(
                    modifier = Modifier.clickable {
                        scope.launch {
                            myModalBottomSheetState.openModal(textValue)
                        }
                    },
                    text = "Open modal"
                )
            }

        }
    }
   }
   }