我如何在jetpack compose 中实现bottomSheet 并具有三种状态？

Question

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

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

Answer 1

ModalBottomSheetValue有一个 state HalfExpanded

底部页面在屏幕高度的 50% 处部分可见。 此 state 仅在底页高度超过屏幕高度的 50% 时启用。

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

我的例子。 请注意此代码height(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)
        )
    }
}

结果