BottomSheetScaffold 展开时不会粘在 BottomNavigation 的顶部

Question

我正在尝试使用 BottomSheetScaffold，但出于某种奇怪的原因，当我在带有底部导航的屏幕上使用它并展开 BottomSheet 时，它的底部移动了一点到顶部，但是当我删除底部导航时，一切都按预期工作！

有人知道为什么会发生这种情况吗？我该如何解决它？

@Composable
fun ContainerView() {
    val scaffoldState = rememberBottomSheetScaffoldState()

    val appBarHeight = getAppBarHeight(
        scaffoldState.bottomSheetState.offset.value,
        scaffoldState.bottomSheetState.targetValue
    )
    Box(modifier = Modifier.fillMaxSize()) {
        BottomSheetScaffold(
            sheetContent = {
                BottomSheetContent(
                    appBarHeight = appBarHeight
                )
            },
            scaffoldState = scaffoldState,
            sheetPeekHeight = 100.dp,
            sheetBackgroundColor = greysWhite,
            sheetShape = Shapes.extraLarge
                .copy(bottomEnd = CornerSize(0), bottomStart = CornerSize(0))
        ) {

            Text("Hello World")
        }
        Surface(elevation = 14.dp) {
            AppBar(
                modifier = Modifier,
                appBarHeight = appBarHeight
            ) { }
        }
    }
}

@Composable
fun BottomSheetContent(
    appBarHeight: Dp,
) {
    val padding by animateDpAsState(
        targetValue = appBarHeight,
        animationSpec = tween(durationMillis = animationDuration)
    )
    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = padding)
            .verticalScroll(scrollState)
            .padding(horizontal = 16.dp)
    ) {
        repeat((0..22).count()) {
            Text("$it", modifier = Modifier.padding(16.dp))
        }
    }
}

Answer 1

我在下面使用了与您相同的代码和示例底部导航，并且在使用它时底板底部没有填充。请检查以下代码。

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ContainerView() {
val scaffoldState = rememberBottomSheetScaffoldState()
val navController = rememberNavController()

Box(modifier = Modifier.fillMaxSize()) {
    BottomSheetScaffold(
        sheetContent = {
            BottomSheetContent(
            )
        },
        scaffoldState = scaffoldState,
        sheetPeekHeight = 100.dp,
        sheetBackgroundColor = Color.Gray,
        sheetShape = Shapes().large
            .copy(bottomEnd = CornerSize(0), bottomStart = 
CornerSize(0))
    ) {

        Text("Hello World")
    }

    Column(modifier = Modifier.fillMaxSize()) {
        Spacer(modifier = Modifier.weight(1f))
        BottomNavigationView(navController = navController)
    }
}
}

@Composable
fun BottomSheetContent(
) {

val scrollState = rememberScrollState()
Column(
    modifier = Modifier
        .fillMaxWidth()
        .verticalScroll(scrollState)
        .padding(horizontal = 16.dp)
) {
    repeat((0..22).count()) {
        Text("$it", modifier = Modifier.padding(16.dp))
    }
}
}

@Composable
fun BottomNavigationView(navController: NavController) {
val items = listOf(
    "Home",
    "MyNetwork",
    "AddPost",
    "Notification",
    "Job"
)
BottomNavigation(
    backgroundColor = Color.Cyan,
    contentColor = Color.Black
) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route
    items.forEach { item ->
        BottomNavigationItem(
            icon = {  },
            label = { Text(text = item,
                fontSize = 9.sp) },
            selectedContentColor = Color.Black,
            unselectedContentColor = Color.Black.copy(0.4f),
            alwaysShowLabel = true,
            selected = currentRoute == item,
            onClick = {

            }
        )
    }
}
}