我有后在这篇文章中我有图标的意见,当用户点击它,它应该打开模态底部工作表,但问题是底部导航栏出现在喷气背包组成模态底部工作表上方,我想隐藏底部导航时,模态底部工作表正在打开,我将在下面的图片
解释这一点
此代码适用于具有底部导航栏的屏幕:
@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
)
}
}
}
)
}
}
1条答案
按热度按时间yr9zkbsy1#
这不是由于代码中的错误,而是由于错误的组件队列。
我也遇到了这个问题,在尝试了很多想法之后,我得出的结论是,在这种情况下,唯一可能实现良好显示的方法是改变功能的顺序。
您需要将
ModalBottomSheetLayout
从包含导航栏的屏幕移动到根函数以获得这样的结构:为了实现这一点,你需要将数据传递给
ModalBottomSheetLayout
,并使用一些全局状态对象来显示它。例如,你可以在这个全局状态对象中创建一个变量,它将存储当前打开的ModalBottomSheetLayout
状态,并以这种方式显示或隐藏它。例如:
单位:
AppState class:
OpenedPopup:
在HomeScreenWidget中:
使用这种方法,您现在可以从任何地方调用特定的
ModalBottomSheetLayout
,如下所示:注意,此方法仅适用于有nafig面板的屏幕,如果没有,则可以使用现在的方法。
希望这对你有帮助