App-Leisten

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.

<ph type="x-smartling-placeholder">

</ph>

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 wie enterAlwaysScrollBehavior, 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)
    }
}
AppBar.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">

</ph>

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)
    }
}
AppBar.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">

</ph>

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)
    }
}
AppBar.kt

Diese Implementierung sieht wie folgt aus, mit einer Demonstration, die zeigt, wie das Scrollen Verhalten von enterAlwaysScrollBehavior() angezeigt:

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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)
    }
}
AppBar.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">

</ph>

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."
        )
    }
}
AppBar.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">

</ph>

Weitere Informationen

• Material3-Dokumente – Obere App-Leiste
• Material3-Dokumente – App-Leiste unten
• Gerüst