Jetpack Compose中模态底部弹窗被底部导航栏遮挡，需隐藏导航栏

我开发的页面包含帖子内容，帖子上设有评论图标，点击后应弹出Modal Bottom Sheet，但目前底部导航栏会显示在弹窗上方，需要实现打开模态弹窗时自动隐藏底部导航栏的效果。

截图说明：

• 帖子页面：显示带评论图标的帖子列表与底部导航栏
• 模态弹窗状态：弹出的评论底部弹窗被底部导航栏部分遮挡

包含底部导航栏的HomeScreen代码 #

@Composable
fun HomeScreenWidget(homeViewModel: HomeViewModel = hiltViewModel()) {
    val systemUiController = rememberSystemUiController()
    systemUiController.setSystemBarsColor(
        color = BackgroundColor
    )
    LaunchedEffect(true) {
        homeViewModel.getCurrentUser()
    }
    val getCurrentUserResult by homeViewModel.getCurrentUserResult.collectAsState()
    if (getCurrentUserResult is Resource.Loading) {
        CircularProgressIndicator()
    } else {
        when (getCurrentUserResult) {
            is Resource.Success -> {
                currentUser = getCurrentUserResult.data
            }
            is Resource.Error -> {
                Timber.e(getCurrentUserResult.message)
            }
            else -> {}
        }
    }

    val navController = rememberNavController()
    Scaffold(
        floatingActionButton = {
            IconButton(
                interactionSource = NoRippleInteractionSource(),
                modifier = Modifier
                    .background(FabColor, shape = CircleShape)
                    .size(65.dp),
                onClick = {},
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.insta_ic),
                    contentDescription = "Add",
                    tint = Color.White
                )
            }
        },
        isFloatingActionButtonDocked = true,
        floatingActionButtonPosition = FabPosition.Center,
        bottomBar = {
            BottomNavigationView(navController)
        },
        content = {
            Modifier.padding(it)
            DestinationsNavHost(
                navController = navController,
                navGraph = NavGraphs.root,
                startRoute = FeedScreenDestination
            )
        }
    )
}

包含帖子和模态底部弹窗的FeedScreen代码 #

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FeedScreenWidget(
    homeViewModel: HomeViewModel = hiltViewModel(),
    navigator: DestinationsNavigator
) {
    val systemUiController = rememberSystemUiController()
    systemUiController.setSystemBarsColor(
        color = BackgroundColor
    )
    val lazyPagingItems = homeViewModel.followingPostsListPager.collectAsLazyPagingItems()
    val lazyColumnState = rememberLazyListState()

    var searchText by remember {
        mutableStateOf("")
    }
    val usernameForModalSheet = remember { mutableStateOf("") }
    val postIdForModalSheet = remember { mutableStateOf("") }
    val isCommentClicked = remember { mutableStateOf(false) }
    val modalBottomSheetState =
        rememberModalBottomSheetState(
            initialValue = ModalBottomSheetValue.Hidden,
            skipHalfExpanded = true
        )
    val scope = rememberCoroutineScope()
    ModalBottomSheetLayout(
        sheetContent = {
            ModalBottomSheetContent(
                navigator,
                usernameForModalSheet,
                postIdForModalSheet,
                homeViewModel,
                isCommentClicked
            )
        },
        modifier = Modifier.fillMaxSize(),
        sheetBackgroundColor = BackgroundColor,
        sheetState = modalBottomSheetState
    ) {
        Scaffold(
            content = {
                Modifier.padding(it)
                Column(
                    modifier = Modifier
                        .background(BackgroundColor)
                        .padding(15.dp)
                        .fillMaxSize()
                ) {
                    Column(
                        modifier = Modifier
                            .background(BackgroundColor)
                            .fillMaxSize()
                    ) {
                        ToolBar(modifier = Modifier)
                        Spacer(modifier = Modifier.height(10.dp))
//                        StorySection(modifier = Modifier, currentUser)
                        Spacer(modifier = Modifier.height(15.dp))
                        ExplorerSection(
                            modifier = Modifier,
                            value = searchText
                        ) { searchText = it }
                        Spacer(modifier = Modifier.height(10.dp))
                        PostsSection(
                            modifier = Modifier,
                            homeViewModel,
                            modalBottomSheetState,
                            scope,
                            usernameForModalSheet,
                            postIdForModalSheet,
                            isCommentClicked,
                            navigator,
                            lazyPagingItems,
                            lazyColumnState
                        )
                    }
                }

            }
        )
    }
}

解决方案 #

问题根源是层级关系：底部导航栏属于HomeScreenWidget的Scaffold，而模态弹窗在子页面FeedScreenWidget中，导航栏层级更高导致遮挡。提供两种可行解决方法：

方法一：状态提升控制导航栏显示 #

通过将弹窗状态提升到HomeScreen层级，动态控制导航栏的显示隐藏：

1. 修改HomeScreen添加状态监听

@Composable
fun HomeScreenWidget(homeViewModel: HomeViewModel = hiltViewModel()) {
    // ... 原有代码不变 ...

    val navController = rememberNavController()
    var isModalSheetVisible by remember { mutableStateOf(false) }

    // 监听ViewModel中的弹窗状态
    LaunchedEffect(true) {
        homeViewModel.isModalSheetVisible.collect { visible ->
            isModalSheetVisible = visible
        }
    }

    Scaffold(
        // ... 原有FAB代码不变 ...
        bottomBar = {
            // 弹窗显示时隐藏导航栏
            if (!isModalSheetVisible) {
                BottomNavigationView(navController)
            }
        },
        content = { padding ->
            Modifier.padding(padding)
            DestinationsNavHost(
                navController = navController,
                navGraph = NavGraphs.root,
                startRoute = FeedScreenDestination
            )
        }
    )
}

2. 在ViewModel中添加状态Flow

class HomeViewModel : ViewModel() {
    // ... 原有代码 ...

    private val _isModalSheetVisible = MutableStateFlow(false)
    val isModalSheetVisible = _isModalSheetVisible.asStateFlow()

    fun updateModalSheetState(visible: Boolean) {
        _isModalSheetVisible.value = visible
    }
}

3. 在FeedScreen中同步弹窗状态

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FeedScreenWidget(
    homeViewModel: HomeViewModel = hiltViewModel(),
    navigator: DestinationsNavigator
) {
    // ... 原有代码 ...

    val modalBottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        skipHalfExpanded = true
    )
    val scope = rememberCoroutineScope()

    // 弹窗状态变化时通知ViewModel
    LaunchedEffect(modalBottomSheetState.currentValue) {
        homeViewModel.updateModalSheetState(
            modalBottomSheetState.currentValue != ModalBottomSheetValue.Hidden
        )
    }

    // ... 原有ModalBottomSheetLayout代码不变 ...
}

方法二：改用导航Dialog路由 #

将评论弹窗改为导航组件的Dialog路由，Dialog会自动覆盖整个屏幕（包括底部导航栏）：

1. 定义Dialog路由

@Destination(style = DestinationStyle.Dialog::class)
@Composable
fun CommentDialog(
    username: String,
    postId: String,
    homeViewModel: HomeViewModel = hiltViewModel(),
    navigator: DestinationsNavigator
) {
    // 放置原ModalBottomSheetContent的内容
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(BackgroundColor)
            .padding(16.dp)
    ) {
        // ... 评论列表、输入框等内容 ...
    }
}

2. 替换弹窗打开逻辑

在FeedScreen的评论图标点击事件中改用导航跳转：

// 原弹窗打开逻辑替换为导航
IconButton(onClick = {
    navigator.navigate(CommentDialogDestination(username = username, postId = postId))
}) {
    Icon(painter = painterResource(id = R.drawable.ic_comment), contentDescription = "评论")
}

内容的提问来源于stack exchange，提问作者Ahmed Maher