android 如何防止ModalBottomSheet与系统按钮重叠？

yqlxgs2m 于 2023-05-21 发布在 Android

关注(0)|答案(1)|浏览(230)

我正在尝试将Material3中的ModalBottomSheet添加到我的应用程序中。我有一个这样实现的主屏幕：

@Composable
fun MainScreen() {

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Scaffold(
            content = {},
            modifier = Modifier.fillMaxSize()
        )
    }
    SignInBottomSheet()
}

和签名底单：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SignInBottomSheet(
) {

    ModalBottomSheet(
        onDismissRequest = {}
    ) {
        Column(
            modifier = Modifier.align(Alignment.CenterHorizontally)
        ) {
            Button(
                modifier = Modifier
                    .width(200.dp)
                    .height(70.dp)
                    .padding(bottom = 10.dp),
                onClick = { /*TODO*/ }
            ) {
                Text(
                    text = "Log in",
                    style = MaterialTheme.typography.bodyLarge,
                    fontWeight = FontWeight.Bold
                )
            }
            Button(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .width(200.dp)
                    .height(70.dp)
                    .padding(bottom = 10.dp),
            ) {
                Text(
                    text = "Continue with Google",
                    style = MaterialTheme.typography.bodyLarge,
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }
}

当应用程序启动时，底部工作表是可见的，当我点击底部工作表的外部时，底部工作表被折叠，但它停留在屏幕底部与系统按钮重叠的部分。
我没有添加任何remember对象，因为我得到了相同的行为与一个，唯一的区别是，底部的工作表消失后，片刻（但仍然是可见的捕捉）。
波纹是打开和关闭的底部工作表的图像（仔细看看屏幕的底部）。

android

来源：https://stackoverflow.com/questions/76245357/how-to-prevent-modalbottomsheet-from-overlapping-with-the-system-buttons

1条答案

按热度按时间

j13ufse21#

默认情况下，它们不隐藏ModalBottomSheet，在文档中，它们还维护if条件以进行工作。
供您参考：https：//developer.android.com/reference/Kotlin/androidx/compose/material3/package-summary#ModalBottomSheet（kotlin.Function0，androidx. compose. ui. Modifier，androidx.compose.material3.SheetState，androidx. compose. ui. graphics. Shape，androidx. compose. ui. graphics. Color，androidx. compose. ui. graphics. Color，androidx. compose. ui. unit. Dp，androidx. compose. ui. graphics. Color，kotlin.Function0，kotlin.Function1）
我们需要维护状态-var openBottomSheet by rememberSaveable { mutableStateOf（false）}
根据底纸解除和打开状态更改状态。
通过使用if条件或动画可见性来修复底部图纸重叠问题。

var openBottomSheet by rememberSaveable { mutableStateOf(false) }
    var skipPartiallyExpanded by remember { mutableStateOf(false) }
    val scope = rememberCoroutineScope()
    val bottomSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = skipPartiallyExpanded
    )

// App content
Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Row(
        Modifier.toggleable(
            value = skipPartiallyExpanded,
            role = Role.Checkbox,
            onValueChange = { checked -> skipPartiallyExpanded = checked }
        )
    ) {
        Checkbox(checked = skipPartiallyExpanded, onCheckedChange = null)
        Spacer(Modifier.width(16.dp))
        Text("Skip partially expanded State")
    }
    Button(onClick = { openBottomSheet = !openBottomSheet }) {
        Text(text = "Show Bottom Sheet")
    }
}

// Sheet content
if (openBottomSheet) {
    ModalBottomSheet(
        onDismissRequest = { openBottomSheet = false },
        sheetState = bottomSheetState,
    ) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
            Button(
                // Note: If you provide logic outside of onDismissRequest to remove the sheet,
                // you must additionally handle intended state cleanup, if any.
                onClick = {
                    scope.launch { bottomSheetState.hide() }.invokeOnCompletion {
                        if (!bottomSheetState.isVisible) {
                            openBottomSheet = false
                        }
                    }
                }
            ) {
                Text("Hide Bottom Sheet")
            }
        }
        var text by remember { mutableStateOf("") }
        OutlinedTextField(value = text, onValueChange = { text = it })
        LazyColumn {
            items(50) {
                ListItem(
                    headlineContent = { Text("Item $it") },
                    leadingContent = {
                        Icon(
                            Icons.Default.Favorite,
                            contentDescription = "Localized description"
                        )
                    }
                )
            }
        }
    }
}

我们也可以使用AnimatedVisibility来代替If条件。

赞(0）回复(0）举报 2023-05-21

我来回答

android 如何防止ModalBottomSheet与系统按钮重叠？

1条答案

相关问题

热门标签

最新问答