Barres inférieures et boutons d’action flottants
Ancrez la navigation et les actions principales.
Barres inférieures et boutons d’action flottants est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Anchoring the Bottom
The thumb-friendly zone of a phone is the bottom. Scaffold's bottomBar and floatingActionButton slots put your key controls right where fingers reach. 👍
The bottomBar Slot
Whatever you place in the bottomBar slot is pinned to the bottom, and Scaffold shrinks the content area so nothing slides behind it.
Scaffold(
bottomBar = { BottomAppBar { Text("Tools") } }
) { p -> }BottomAppBar
BottomAppBar is a Material container for actions tied to the current screen, like edit or share buttons. It is a RowScope, so children flow left to right.
Meet the FAB
A FloatingActionButton is the round, raised button for the single most important action on a screen, like Add or Compose. ➕
FloatingActionButton(onClick = { }) {
Icon(Icons.Default.Add, "Add")
}The FAB Slot
Put your FAB in Scaffold's floatingActionButton slot, not in your content. Scaffold then floats it correctly above the bottom edge.
Scaffold(
floatingActionButton = { FloatingActionButton(onClick = {}) {} }
) { p -> }One FAB Per Screen
A FAB signals the primary action, so use just one per screen. Two competing FABs leave users unsure which one really matters.
FAB Position
Control where the FAB sits with floatingActionButtonPosition. The default is the bottom-right corner, but Center pairs nicely with a bottom bar.
floatingActionButtonPosition = FabPosition.CenterFAB Sizes
Beyond the standard FAB, Material 3 adds SmallFloatingActionButton and LargeFloatingActionButton so you can match the button to the screen's weight.
The ExtendedFAB
An ExtendedFloatingActionButton shows an icon plus a text label. It works well when the action's name is not obvious from an icon alone.
ExtendedFloatingActionButton(
onClick = { },
icon = { Icon(Icons.Default.Add, "Add") },
text = { Text("New") }
)Bars and FAB Together
Scaffold understands when a bottomBar and a FAB coexist, lifting the FAB so it never overlaps the bar. You just fill both slots.
Describe the FAB
Like any icon button, give the FAB's Icon a contentDescription. A bare plus sign means nothing to a screen reader without it.
Quick Check
How many FloatingActionButtons should a single screen normally show?
Recap
Use the bottomBar slot for screen actions and the floatingActionButton slot for one primary action. Scaffold spaces them so they never collide. ✨
Apprends Kotlin avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Barres inférieures et boutons d’action flottants » est-elle gratuite ?
Oui — le texte complet de « Barres inférieures et boutons d’action flottants » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Barres inférieures et boutons d’action flottants » ?
Ancrez la navigation et les actions principales. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Barres inférieures et boutons d’action flottants » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Scaffold : le squelette de l’écran
- TopAppBar et icônes d’action
- Barres inférieures et boutons d’action flottants
- Snackbars et SnackbarHostState