如何在 Jetpack Compose 中为多个文本应用 bottom sheet？

Question

那些日子我正在尝试学习 jetpack compose，所以我想在 jetpack compose 中学习底层 sheet，我只针对一个文本这样做，但我想将它用于多个文本，我有一个示例 here，但我不确定如何在我的项目中实施，是否有任何解决方案可以让两个以上的文本按钮应用到底部 sheet？

@Composable
fun BottomSheetMyScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(initialValue = 
  ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetContent = {
            BottomSheetFirstScreen()
         

        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp),
        sheetBackgroundColor = Color.Red,
       
    ) {
        Scaffold(

            backgroundColor = Color.Red
        ) {
            MyScreen(
                scope = scope, state = modalBottomSheetState

            )}}}
 
@Composable
fun MyScreen(
    scope: CoroutineScope, state: ModalBottomSheetState,

) {

            MainRow(
                name = "name1",
                onClick = {  scope.launch {
                    state.show()
                }}
            )

            MainRow(
                name = "name2",
                onClick = { scope.launch {
                    state.show()
                } }

            )}}
     
@Composable
fun MainRow(
    name: String,
    onClick: () -> Unit

    ) {

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .clickable(onClick = onClick),
        verticalAlignment = Alignment.CenterVertically
    ) {

        Column(
            modifier = Modifier
                .width(150.dp)

           ) {

            Text(
                text = name,
               
            )}}}

Answer 1

我编辑了你的代码，你可以使用这个代码：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetMyScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(
        initialValue =
        ModalBottomSheetValue.Hidden
    )
    val scope = rememberCoroutineScope()
    val sheetContentState = remember {
        mutableStateOf(0)
    }
    ModalBottomSheetLayout(
        sheetContent = {
            when (sheetContentState.value) {
                0 -> {
                    BottomSheetFirstScreen()
                }
                1 -> {
                    BottomSheetSecondScreen()
                }
            }
        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp),
        sheetBackgroundColor = Color.Red,
    ) {
        Scaffold(
            backgroundColor = Color.Red
        ) {
            MyScreen(
                scope = scope, state = modalBottomSheetState, sheetContentState = sheetContentState
            )
        }
    }
}

主行

@Composable
fun MainRow(
    name: String,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = name,
            modifier = Modifier.clickable { onClick.invoke() }
        )
    }
}

和我的屏幕

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MyScreen(
    scope: CoroutineScope,
    state: ModalBottomSheetState,
    sheetContentState: MutableState<Int>
) {
    Column(modifier = Modifier.fillMaxWidth()) {
        MainRow(
            name = "name 1",
            onClick = {
                scope.launch {
                    sheetContentState.value = 0
                    state.show()
                }
            }
        )
        MainRow(
            name = "name 2",
            onClick = {
                scope.launch {
                    sheetContentState.value = 1
                    state.show()
                }
            }
        )
    }
}

如何在 Jetpack Compose 中为多个文本应用 bottom sheet？

How to apply bottom sheet for multiple text in jetpack compose?

android

kotlin

android-jetpack-compose

android-bottomsheetdialog