android 底部导航栏出现在喷气背包组成模式底部工作表上方

np8igboo  于 2023-04-18  发布在  Android
关注(0)|答案(1)|浏览(165)

我有后在这篇文章中我有图标的意见,当用户点击它,它应该打开模态底部工作表,但问题是底部导航栏出现在喷气背包组成模态底部工作表上方,我想隐藏底部导航时,模态底部工作表正在打开,我将在下面的图片


解释这一点
此代码适用于具有底部导航栏的屏幕:

@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
            )
        }
    )
}

这段代码是为饲料屏幕有职位和模态的底部工作表:

@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
                        )
                    }
                }

            }
        )
    }
}
yr9zkbsy

yr9zkbsy1#

这不是由于代码中的错误,而是由于错误的组件队列。
我也遇到了这个问题,在尝试了很多想法之后,我得出的结论是,在这种情况下,唯一可能实现良好显示的方法是改变功能的顺序。
您需要将ModalBottomSheetLayout从包含导航栏的屏幕移动到根函数以获得这样的结构:

@Composable
fun HomeScreenWidget(homeViewModel: HomeViewModel = hiltViewModel()) {
    Scaffold(){}
    ModalBottomSheetLayout()
}

为了实现这一点,你需要将数据传递给ModalBottomSheetLayout,并使用一些全局状态对象来显示它。例如,你可以在这个全局状态对象中创建一个变量,它将存储当前打开的ModalBottomSheetLayout状态,并以这种方式显示或隐藏它。
例如:
单位:AppState class:

var openedPopup by mutableStateOf<OpenedPopup?>(null)
        private set

fun updateOpenedPopup(popup: OpenedPopup?) { // pass null to hide popup
        openedPopup = popup
}

OpenedPopup:

sealed class OpenedPopup {
    object SimplePopup : OpenedPopup() // no external data
    class ComplicatedPopup(val state: YourPopupDataState) : OpenedPopup()
}

在HomeScreenWidget中:

val simpleBSS = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden, skipHalfExpanded = true)
val complBSS = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden, skipHalfExpanded = true)

LaunchedEffect(key1 = state.openedPopup) {
        when (state.openedPopup) {
            null -> {
                simpleBSS.hide()
                complBSS.hide()
            }
            SimplePopup -> simpleBSS.show()
            ComplicatedPopup -> complBSS.show()
        }
}

LaunchedEffect(Unit) {
        snapshotFlow { simpleBSS.currentValue }
            .collect { if (it == ModalBottomSheetValue.Hidden) state.updateOpenedPopup(null) }
    }

LaunchedEffect(Unit) {
        snapshotFlow { complBSS.currentValue }
            .collect { if (it == ModalBottomSheetValue.Hidden) state.updateOpenedPopup(null) }
    }

// place your ModalBottomSheetLayout here and pass state
// it is better to put each popup into a separate file and function
ModalBottomSheetLayout(sheetState = simpleBSS){}
ModalBottomSheetLayout(sheetState = complBSS){}

使用这种方法,您现在可以从任何地方调用特定的ModalBottomSheetLayout,如下所示:

state.updateOpenedPopup(SimplePopup)
state.updateOpenedPopup(ComplicatedPopup(YourPopupDataState()))

注意,此方法仅适用于有nafig面板的屏幕,如果没有,则可以使用现在的方法。

希望这对你有帮助

相关问题