Diese Seite wurde von der Cloud Translation API übersetzt.

App-Leisten

App-Leisten sind Container, die dem Nutzer Zugriff auf wichtige Funktionen und Navigationselemente ermöglichen. Es gibt zwei Arten von App-Leisten: obere und untere App-Leisten. Ihr jeweiliges Aussehen und ihren Zweck lautet:

Typ	Darstellung	Zweck
Obere App-Leiste	Oben auf dem Bildschirm.	Bietet Zugriff auf wichtige Aufgaben und Informationen. Hosts in der Regel einen Titel, grundlegende Aktionselemente und bestimmte Navigationselemente.
Untere App-Leiste	Unten auf dem Bildschirm.	Enthält normalerweise die wichtigsten Navigationselemente. Kann auch Zugriff auf andere wichtige Aktionen gewähren, z. B. über eine unverankerte Aktionsschaltfläche.

Ein Beispiel für eine obere und untere App-Leiste. — **Abbildung 1**: Eine obere App-Leiste (links) und eine untere App-Leiste (rechts)

Verwenden Sie die zusammensetzbaren Funktionen TopAppBar bzw. BottomAppBar, um eine obere und eine untere App-Leiste zu implementieren. Sie ermöglichen es Ihnen, einheitliche Oberflächen zu erstellen, die Navigations- und Aktionssteuerungen enthalten und den Material Design-Prinzipien entsprechen.

Obere App-Leisten

In der folgenden Tabelle sind die vier Arten von oberen App-Leisten aufgeführt:

Typ	Beispiel
Klein: Für Bildschirme, die nicht viel Navigation oder Aktionen erfordern.
Zentriert: Für Bildschirme mit einer einzelnen primären Aktion.
Mittel: Für Bildschirme, die ein wenig Navigation und Aktionen erfordern.
Groß: Für Bildschirme, die eine hohe Navigation und viele Aktionen erfordern.

API-Oberfläche

Die verschiedenen zusammensetzbaren Funktionen, mit denen Sie die vier verschiedenen oberen App-Leisten implementieren können, sind sehr ähnlich. Sie haben mehrere wichtige Parameter:

title: Der Text, der in der App-Leiste angezeigt wird.
navigationIcon: Das primäre Symbol für die Navigation. Sie befindet sich links in der App-Leiste.
actions: Symbole, die dem Nutzer Zugriff auf wichtige Aktionen ermöglichen. Sie werden rechts in der App-Leiste angezeigt.
scrollBehavior: Bestimmt, wie die obere App-Leiste auf das Scrollen des inneren Inhalts des Scaffolds reagiert.
colors: Legt die Darstellung der App-Leiste fest.

Scrollverhalten

Sie können festlegen, wie die App-Leiste reagiert, wenn der Nutzer durch den inneren Inhalt des Gerüsts scrollt. Dazu erstellen Sie eine Instanz von TopAppBarScrollBehavior und übergeben sie für den Parameter scrollBehavior an die obere App-Leiste.

Es gibt drei Arten von TopAppBarScrollBehavior. Sie sind folgende:

enterAlwaysScrollBehavior: Wenn der Nutzer den inneren Inhalt des Scaffolds aufruft, wird die obere App-Leiste minimiert. Die App-Leiste wird maximiert, wenn der Nutzer den inneren Inhalt nach unten zieht.
exitUntilCollapsedScrollBehavior: Ähnlich wie enterAlwaysScrollBehavior, wobei die App-Leiste zusätzlich maximiert wird, wenn der Nutzer das Ende des inneren Inhalts des Gerüsts erreicht.
pinnedScrollBehavior: Die App-Leiste bleibt fixiert und reagiert nicht auf Scrollen.

In den folgenden Beispielen werden einige dieser Optionen implementiert.

Beispiele

In den folgenden Abschnitten werden Implementierungen für die vier verschiedenen Arten von oberen App-Leisten beschrieben, einschließlich unterschiedlicher Beispiele für die Steuerung des Scrollverhaltens.

Klein

Wenn Sie eine kleine obere App-Leiste erstellen möchten, verwenden Sie die zusammensetzbare Funktion TopAppBar. Dies ist die einfachste obere App-Leiste. Sie enthält in diesem Beispiel nur einen Titel.

Im folgenden Beispiel wird TopAppBar nicht als Wert für scrollBehavior übergeben. Daher wird nicht auf das Scrollen des inneren Inhalts reagiert.

@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:

Ein Beispiel für eine kleine obere App-Leiste. — **Abbildung 2**: Eine kleine obere App-Leiste

Zentriert

Die zentrierte obere App-Leiste ist im Wesentlichen mit der kleinen App-Leiste identisch, auch wenn der Titel innerhalb der Komponente zentriert ist. Verwenden Sie zur Implementierung die dedizierte zusammensetzbare Funktion CenterAlignedTopAppBar.

In diesem Beispiel wird enterAlwaysScrollBehavior() verwendet, um den Wert abzurufen, den es für scrollBehavior übergibt. Daher wird die Leiste minimiert, wenn der Nutzer durch den inneren Inhalt des Gerüsts scrollt.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    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.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:

Alt-Text hier eingeben — **Abbildung 3**: Eine zentrierte obere App-Leiste.

Medium

Die mittelgroße obere App-Leiste platziert den Titel unter allen zusätzlichen Symbolen. Verwenden Sie zum Erstellen eines solchen Objekts die zusammensetzbare Funktion MediumTopAppBar.

Wie im vorherigen Snippet wird auch in diesem Beispiel enterAlwaysScrollBehavior() verwendet, um den Wert abzurufen, den es für scrollBehavior übergibt.

@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.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 zeigt eine Demonstration des Scrollverhaltens von enterAlwaysScrollBehavior():

Abbildung 4. Eine zentrierte obere App-Leiste.

Groß

Eine große obere App-Leiste ähnelt dem Medium, wobei der Abstand zwischen Titel und Symbol größer ist und insgesamt mehr Platz auf dem Bildschirm einnimmt. Verwenden Sie dazu die zusammensetzbare Funktion LargeTopAppBar.

Im Gegensatz zu den vorherigen Snippets wird in diesem Beispiel exitUntilCollapsedScrollBehavior() verwendet, um den Wert abzurufen, den es für scrollBehavior übergibt. Daher wird die Leiste minimiert, wenn der Nutzer durch den inneren Inhalt des Gerüsts scrollt, und wird dann maximiert, wenn der Nutzer bis zum Ende des inneren Inhalts scrollt.

@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.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:

Ein Bildschirm in einer App mit einer App-Leiste am unteren Rand, die auf der linken Seite für Aktionssymbole steht, und einer unverankerten Aktionsschaltfläche auf der rechten Seite. — **Abbildung 5**: Beispiel für die Implementierung einer großen oberen App-Leiste

Untere App-Leiste

Verwenden Sie die zusammensetzbare Funktion BottomAppBar, um eine untere App-Leiste zu erstellen. Die Verwendung dieser zusammensetzbaren Funktion ähnelt den oberen zusammensetzbaren Funktionen der App-Leiste, die in den vorherigen Abschnitten auf dieser Seite beschrieben wurden. Sie übergeben zusammensetzbare Funktionen für die folgenden Schlüsselparameter:

actions: Eine Reihe von Symbolen auf der linken Seite der Leiste. Dies sind entweder Schlüsselaktionen für den jeweiligen Bildschirm oder Navigationselemente.
floatingActionButton: Die unverankerte Aktionsschaltfläche 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: