为什么喷气背包组合中的底片不能与底部导航一起工作？ [英] Why bottom sheet not work with bottom navigation in jetpack compose?

问题描述

这几天我试着学习Jetpack作曲，我有一个简单的Jetpack作曲项目，在我的项目中有底单工作，但当我使用底部导航时，它不工作，我搜索了很多网站和Stackoverflow特别，但我没有找到任何解决方案，我不知道我错过了什么？有什么想法吗？

 @Composable
fun BSDataScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(initialValue = 
 ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetContent = {

            SheetScreen()
        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 15.dp, topEnd = 15.dp),
        sheetBackgroundColor = Color.White,
      
    ) {
        Scaffold(

            backgroundColor =  Color.White,
        ) {
            DataScreen(
                scope = scope, state = modalBottomSheetState)}}}

@Composable
fun DataScreen(
    scope: CoroutineScope,
    state: ModalBottomSheetState
  ) {


    val listOfData = listOf(
        Data( painterResource(R.drawable.image1)),
        Data(painterResource(R.drawable.image2)),
        Data(painterResource(R.drawable.image3),)

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)

    ) {

        LazyColumn(
            modifier = Modifier

        ) {

            items(listOfData.size) { index ->
                DataListItem(listOfData[index]) data: Data->

        scope.launch {
            state.show()
        }
 
     }}}}


@Composable
fun DataListItem(data: Data, onLongClick: (Data) -> Unit) {

    val context = LocalContext.current

    Column(
        modifier = Modifier.padding(5.dp)
    ) {

        Row(

            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp)
                .combinedClickable(
                    onLongClick= {
               onLongClick(data)
     },)

        ) {

            Image(
                painter = data.painter,
                contentDescription = null,)}}}
      

BottomNav：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainScreen()
        }
    }
}

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    Scaffold(

        bottomBar = { BottomNavigationBar(navController) }
    ) {
        Navigation(navController = navController)
    }
}

 
 @Composable
 fun Navigation(navController: NavHostController) {
     val modalBottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
     val scope = rememberCoroutineScope()
    NavHost(navController, startDestination = NavigationItem.Data.route) {

        composable(NavigationItem.Data.route) {
          DataScreen(
              scope = scope, state = modalBottomSheetState
          )

        }
        composable(NavigationItem.Data2.route) {
            Data2Screen()
        }
        composable(NavigationItem.Data3.route) {
            Data3Screen()
        }
        composable(NavigationItem.Data4.route) {
            Data4Screen()
        }
        composable(NavigationItem.Data5.route) {
            Data5Screen()
        }
    }
 }

@Composable
fun BottomNavigationBar(navController: NavController

    ) {
    val items = listOf(
        NavigationItem.Data,
        NavigationItem.Data2,
        NavigationItem.Data3,
        NavigationItem.Data4,
        NavigationItem.Data5

    )
   
    BottomNavigation(
        backgroundColor = colorResource(id = R.color.white),
        contentColor = colorResource(id = R.color.black)

    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.forEach { item ->
            BottomNavigationItem(
                icon = {
                    Icon(
                        painterResource(id = item.icon),
                        contentDescription = null
                    )
                },
                selectedContentColor = colorResource(id = R.color.red),
                unselectedContentColor = colorResource(id = R.color.blue),
                alwaysShowLabel = true,
                selected = currentRoute == item.route,
                onClick = {
                    navController.navigate(item.route) {

                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route) {
                                saveState = true
                            }
                        }

                        launchSingleTop = true

                        restoreState = true
                    }})}}}
           

推荐答案

只需使用ModalBottomSheetLayout将整个屏幕环绕。

您可以放入以下代码：

Scaffold(

        bottomBar = { BottomNavigationBar(navController) }
    ) {
        Navigation(navController = navController)
    }

内部

ModalBottomSheetLayout(...){
    Scaffold(

        bottomBar = { BottomNavigationBar(navController) }
    ) {
        Navigation(navController = navController)
    }
}

这篇关于为什么喷气背包组合中的底片不能与底部导航一起工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！