App-Leisten sind Container, die Nutzern Zugriff auf wichtige Funktionen und Navigationselemente. Es gibt zwei Arten von App-Leisten: obere und untere App-Leisten Balken. Ihr jeweiliges Aussehen und ihr Zweck sind wie folgt:
Typ |
Darstellung |
Zweck |
---|---|---|
Obere App-Leiste |
Am oberen Bildschirmrand. |
Zugriff auf wichtige Aufgaben und Informationen In der Regel werden ein Titel, wichtige Aufgaben und bestimmte Navigationselemente gehostet. |
Untere App-Leiste |
Am unteren Bildschirmrand. |
Enthält in der Regel die wichtigsten Navigationselemente. Sie bietet eventuell auch Zugriff auf andere wichtige Aktionen, z. B. über eine enthaltene unverankerte Aktionsschaltfläche. |
Wenn Sie eine obere und eine untere App-Leiste implementieren möchten, verwenden Sie TopAppBar
und
BottomAppBar
zusammensetzbare Funktionen. Sie ermöglichen es Ihnen,
Schnittstellen, die Navigations- und Aktionssteuerungen umfassen
die mit den Material-Design-Prinzipien
vereinbar sind.
Top-App-Leisten
In der folgenden Tabelle werden die vier Arten von oberen App-Leisten beschrieben:
Typ |
Beispiel |
---|---|
Klein: Für Bildschirme, die nicht viel Navigation oder Aktionen erfordern. |
|
Zentriert: Für Bildschirme mit einer einzelnen, primären Aktion. |
|
Mittel: Diese Option eignet sich für Bildschirme, die relativ viel Navigation und Aktionen erfordern. |
|
Groß: Für Bildschirme, die viel Navigation und Aktionen erfordern. |
API-Oberfläche
Die verschiedenen zusammensetzbaren Funktionen, mit denen Sie die vier verschiedenen Top-Apps implementieren können Balken sind recht ähnlich. Sie haben mehrere wichtige Parameter gemeinsam:
title
: Der Text, der in der App-Leiste angezeigt wird.navigationIcon
: Das primäre Symbol für die Navigation. Erscheint auf der links neben der App-Leiste.actions
: Symbole, die dem Nutzer Zugriff auf wichtige Aktionen ermöglichen. Sie erscheinen rechts in der App-Leiste.scrollBehavior
: Bestimmt, wie die obere App-Leiste auf das Scrollen um inneren Inhalt des Scaffolds.colors
: Bestimmt, wie die App-Leiste angezeigt wird.
Scrollverhalten
Sie können steuern, wie die App-Leiste reagiert, wenn der Nutzer durch die vorgegebenen
inneren Inhalt des Gerüsts. Erstellen Sie dazu eine Instanz von
TopAppBarScrollBehavior
und übergeben Sie ihn in der oberen App-Leiste für das
scrollBehavior
-Parameter.
Es gibt drei Arten von TopAppBarScrollBehavior
. Diese sind:
enterAlwaysScrollBehavior
: Wenn der Nutzer das innere Gerüst des Scaffolds aufruft wird die obere App-Leiste minimiert. Die App-Leiste wird maximiert, wenn der Nutzer den inneren Inhalt herauszieht.exitUntilCollapsedScrollBehavior
: Ähnlich wieenterAlwaysScrollBehavior
, Die App-Leiste wird jedoch zusätzlich maximiert, wenn der Nutzer das Ende des inneren Inhalt des Gerüsts.pinnedScrollBehavior
: Die App-Leiste bleibt an Ort und reagiert nicht auf durch Scrollen.
In den folgenden Beispielen werden einige dieser Optionen implementiert.
Beispiele
In den folgenden Abschnitten werden Implementierungen für die vier verschiedenen oberen App-Leisten mit verschiedenen Beispielen dafür, wie Sie das Scrollverhalten steuern können.
Klein
Um eine kleine obere App-Leiste zu erstellen, verwenden Sie die zusammensetzbare Funktion TopAppBar
. Dies ist die
oben auf der App-Leiste zu erstellen.
In diesem Beispiel enthält sie nur einen Titel.
Im folgenden Beispiel wird TopAppBar
kein Wert für
scrollBehavior
und reagiert daher nicht auf das Scrollen der inneren
Inhalte.
@Composable fun SmallTopAppBarExample() { Scaffold( topBar = { TopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text("Small Top App Bar") } ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">Zentriert
Die zentriert ausgerichtete obere App-Leiste entspricht im Wesentlichen der kleinen App-Leiste.
auch wenn der Titel in der Komponente zentriert ist. Verwenden Sie zur Implementierung die Methode
dedizierten zusammensetzbaren CenterAlignedTopAppBar
-Element.
In diesem Beispiel wird enterAlwaysScrollBehavior()
verwendet, um den übergebenen Wert abzurufen
für scrollBehavior
. Daher wird die Leiste minimiert, wenn der Nutzer durch die
inneren Inhalt des Gerüsts.
@Composable fun CenterAlignedTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { CenterAlignedTopAppBar( colors = TopAppBarDefaults.centerAlignedTopAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Centered Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior, ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">Mittel
In der mittelgroßen App-Leiste wird der Titel unter allen zusätzlichen Symbolen platziert. Zum Erstellen
verwenden Sie die zusammensetzbare Funktion MediumTopAppBar
.
Wie beim vorherigen Snippet wird auch hier enterAlwaysScrollBehavior()
verwendet,
den Wert abrufen, der für scrollBehavior
übergeben wird.
@Composable fun MediumTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { MediumTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Medium Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Diese Implementierung sieht wie folgt aus, mit einer Demonstration, die zeigt, wie das Scrollen
Verhalten von enterAlwaysScrollBehavior()
angezeigt:
Groß
Eine große obere App-Leiste ähnelt dem Medium, wobei der Abstand zwischen den
Titel und Symbole größer und nimmt insgesamt mehr Platz auf dem Bildschirm ein. Bis
erstellen möchten, verwenden Sie die zusammensetzbare Funktion LargeTopAppBar
.
Im Gegensatz zu den vorherigen Snippets werden in diesem Beispiel
exitUntilCollapsedScrollBehavior()
, um den Wert abzurufen, der übergeben wird
scrollBehavior
. Daher wird die Leiste minimiert, wenn der Nutzer durch die
der inneren Inhalt des Scaffolds, aber dann maximiert, wenn der Nutzer bis zum Ende
den inneren Inhalt.
@Composable fun LargeTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Large Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">Untere App-Leiste
Wenn Sie eine untere App-Leiste erstellen möchten, verwenden Sie die zusammensetzbare Funktion BottomAppBar
. Mit diesem
ist den oben beschriebenen zusammensetzbaren Funktionen in der App-Leiste in der
in den vorherigen Abschnitten. Sie übergeben zusammensetzbare Funktionen für den folgenden Schlüssel
Parameter:
actions
: Eine Reihe von Symbolen, die links in der Leiste angezeigt werden. Diese sind meist entweder Schlüsselaktionen für den jeweiligen Bildschirm oder Navigationselemente.floatingActionButton
: Die unverankerte Aktionsschaltfläche, die auf dem auf der rechten Seite der Leiste.
@Composable fun BottomAppBarExample() { Scaffold( bottomBar = { BottomAppBar( actions = { IconButton(onClick = { /* do something */ }) { Icon(Icons.Filled.Check, contentDescription = "Localized description") } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Edit, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Mic, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Image, contentDescription = "Localized description", ) } }, floatingActionButton = { FloatingActionButton( onClick = { /* do something */ }, containerColor = BottomAppBarDefaults.bottomAppBarFabColor, elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation() ) { Icon(Icons.Filled.Add, "Localized description") } } ) }, ) { innerPadding -> Text( modifier = Modifier.padding(innerPadding), text = "Example of a scaffold with a bottom app bar." ) } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">