我如何在jetpack中实现bottomSheet三态合成？

Question

我需要使用jetpack compose来实现这三种状态的底部表单布局，如何通过最佳实践来实现？

https://i.stack.imgur.com/86FXs.png

Answer 1

ModalBottomSheetValue具有一个状态半扩展的状态

底部工作表在屏幕高度的50%处部分可见。仅当底部工作表的高度超过屏幕高度的50%时才启用此状态。

因此，您的ModalBottomSheetLayout的高度应该超过屏幕的一半

我的例子。请注意此代码高度（600.dp）。尝试使用此值

class ComposeActivity7 : ComponentActivity() {

    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTutorialTheme {
                val modalBottomSheetState =
                    rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
                val scope = rememberCoroutineScope()

                Scaffold(
                    floatingActionButton = {
                        FloatingActionButton(
                            onClick = {
                                scope.launch {
                                    modalBottomSheetState.show()
                                }
                            }) {
                            Icon(
                                Icons.Rounded.Add,
                                contentDescription = "add"
                            )
                        }
                    }) {
                    ModalBottomSheetLayout(
                        sheetState = modalBottomSheetState,
                        sheetContent = {
                            MySheet()

                        }
                    ) {
                        Text("hello")
                    }
                }
            }
        }
    }
}

@Composable
fun MySheet() {
    Column {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(600.dp)
        )
    }
}

结果