Die untere Navigationsleiste überlappt den Bildschirminhalt in Jetpack Compose

Lesezeit: 2 Minuten

Benutzeravatar von Gianluca Veschi
Gianluca Veschi

Ich habe ein BottomNavBar die innerhalb der aufgerufen wird bottomBar von a Scaffold.
Jeder Bildschirm enthält eine LazyColumn die eine Reihe von Bildern anzeigt.
Aus irgendeinem Grund, wenn ich mit dem Scrollen fertig bin, die BottomNavBar überlappt den unteren Teil der Artikelliste.
Wie kann ich das beheben?

Geben Sie hier die Bildbeschreibung ein

Hier der eingestellte Inhalt von MainActivity

SetContent{
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "tartufozon") },
                actions = {
                    IconButton(onClick = { Timber.d("Mail clicked") }) {
                        Icon(Icons.Default.Email, contentDescription = null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavBar(navController = navController)
        }
    ) {
    BottomNavScreensController(navController = navController)
    }
}

Benutzeravatar von ianhanniballake
ianhanniballake

Gemäß der API-Definition für Scaffolddein innerer Inhalt (das nachlaufende Lambda, das du hast BottomNavScreensController in), ist gegeben a PaddingValues Objekt, das Ihnen die richtige Menge an Polsterung für Ihre obere App-Leiste, untere Leiste usw. gibt.

Im Moment beziehen Sie sich überhaupt nicht auf diese Polsterung und daher auf Ihren Inhalt nicht aufgefüllt. Dies verursacht Ihre Überlappung.

Sie können eine hinzufügen Box um deine BottomNavScreensController um die Polsterung anzubringen, oder führen Sie die Polsterung direkt in Ihren Körper BottomNavScreensController damit jeder einzelne Bildschirm die Polsterung korrekt aufbringen kann; beide Lösungen funktionieren.

Scaffold(
    topBar = {
      //
    },
    bottomBar = {
        //
    }
    ) { innerPadding ->
        // Apply the padding globally to the whole BottomNavScreensController
        Box(modifier = Modifier.padding(innerPadding)) {
            BottomNavScreensController(navController = navController)
        }
    }
}

  • Box( Schließen fehlt im Code-Snippet.

    – Vaisakh N

    27. April 2021 um 10:42 Uhr

  • In der neuesten Version hat dies für mich funktioniert: innerPadding.calculateBottomPadding()

    – Jerry Okafor

    26. Juni 2021 um 8:41 Uhr


  • @ianhanniballake Ich habe vergessen, wie oft mir deine Antworten geholfen haben

    – Vahid

    14. August 2021 um 10:49 Uhr

  • zuvor haben wir die fest codierten Werte eingefügt, z. B.: 76.dpaber damit müssen Sie nicht jedes andere Element manuell berechnen, das verwendet wird Scaffold mehr. Vielen Dank!

    – mochadwi

    6. September 2021 um 0:13 Uhr

Folgen Sie der Antwort von ianhanniballake und seinen Kommentaren, um Ihnen nur ein paar Minuten zu sparen. Der Code wäre ungefähr so:

Scaffold(
    topBar = {
      //
    },
    bottomBar = {
        //
    }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(
          PaddingValues(0.dp, 0.dp, 0.dp, innerPadding.calculateBottomPadding()) {
            BottomNavScreensController(navController = navController)
        }
    }
}

Sie müssen keine Berechnungen mehr durchführen. Führen Sie im Gerüstinhalt Folgendes aus:

content = { padding ->
  Column(
    modifier = Modifier.padding(padding)
  ) {...

Scaffold(
    bottomBar = {
       BottomNavigationBar(navController = navController)
   }
) { innerPadding ->
      Box(modifier = Modifier.padding(innerPadding)) {
               DestinationsNavHost(
                  navGraph = NavGraphs.root,
                  navController = navController,
                  engine = navHostEngine
                )
         }
}

1396370cookie-checkDie untere Navigationsleiste überlappt den Bildschirminhalt in Jetpack Compose

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy