8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

无法在 jetpack compose 中获取 ModalBottomSheet 的所需行为

jonnybolton16 1月前

27 0

我正在尝试在 Jetpack Compose 中制作一个非常简单的 ModalBottomSheet。我想用 ModalBottomSheet 实现两个主要功能,即 - 对于高度 - 当我单击 Scaffold 的操作时

我正在尝试在 Jetpack Compose 中制作一个非常简单的 ModalBottomSheet。我想用 ModalBottomSheet 实现两个主要功能:

  1. 对于高度 - 当我点击 Scaffold 的操作按钮时,底部表单必须占据屏幕高度的 70%。然后当我向上滚动时,它将占据屏幕高度的 100%。
  2. 对于宽度 - 当我单击 Scaffold 的操作按钮时,底部工作表必须从左侧和右侧打开一些填充(假设为 8.dp),然后当我向上滚动时,它必须占据整个屏幕的宽度。

我试过这段代码

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldWithBottomSheet() {
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false
    )
    val scope = rememberCoroutineScope()
    var showBottomSheet by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Hello")
                },
                actions = {
                    IconButton(onClick = {
                        showBottomSheet = true
                        scope.launch {
                            // Explicitly set the bottom sheet to partially expanded (70%)

                            sheetState.show()
                            sheetState.partialExpand()
                        }
                    }) {
                        Icon(imageVector = Icons.Default.MoreVert, contentDescription = null)
                    }
                }
            )
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            // Main content goes here
        }

        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = Modifier.fillMaxWidth(),
                onDismissRequest = {
                    showBottomSheet = false
                },
                sheetState = sheetState
            ) {
                // Custom behavior to mimic 70% height when partially expanded
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(
                            if (sheetState.currentValue == SheetValue.PartiallyExpanded)
                                (LocalConfiguration.current.screenHeightDp * 0.7f).dp
                            else
                                LocalConfiguration.current.screenHeightDp.dp
                        )
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp)
                    ) {
                        Button(onClick = {
                            scope.launch {
                                sheetState.hide()
                            }.invokeOnCompletion {
                                if (!sheetState.isVisible) {
                                    showBottomSheet = false
                                }
                            }
                        }) {
                            Text(text = "Hide")
                        }
                        Text(text = "Swipe up to expand fully!")
                    }
                }
            }
        }
    }
}

我使用这段代码得到的行为是,当我点击按钮时,它会打开到默认高度,然后当我向上滚动它时,它会打开到高度的 70%,当我再次向上滚动它时,它会打开 100% 的高度。但我不需要它。我希望,当我点击按钮时,它必须直接覆盖到高度的 70%。我谦虚地请求大家帮助我解决这个问题。

帖子版权声明 1、本帖标题:无法在 jetpack compose 中获取 ModalBottomSheet 的所需行为
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由jonnybolton16在本站《kotlin》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: