Jetpack Compose Basics - Hľadáš alternatívu k menu alebo dialógom? Skús Modal Bottom Sheet
Mobile
2
 min read
February 24, 2022

Jetpack Compose Basics - Hľadáš alternatívu k menu alebo dialógom? Skús Modal Bottom Sheet

Peter Šuly
Peter Šuly
Android developer
LinkedIn Logo

Bottom Sheet je komponent používaný ako doplnková plocha ukotvená k spodnej časti obrazovky. Tento článok bude o presnom type Bottom Sheet - Modal Bottom Sheet a o tom, ako ho použiť v Jetpack Compose

Je to alternatíva k menu alebo dialógovým oknám, musí sa zavrieť (buď potiahnutím prstom alebo inou interakciou používateľa), aby ste mohl interagovať s obsahom obrazovky. V Jetpack Compose je bottom sheet implementovaný pomocou composable ModalBottomSheet.

Anatómia bottom sheetu. 1 - bottom sheet content, 2 - row of bottom sheet, 3 - overlaid screen content

Ako vytvoriť Bottom Sheet v Jetpack Compose?

ModalBottomSheet má 3 možné stavy definované prostredníctvom parametra sheetState typu ModalBottomSheetValue. Možné hodnoty sú Hidden, Expanded alebo HalfExpanded. Predvolená hodnota v stave listu je Hidden, vlastný stav si možno zapamätať takto

Ako je obvyklé ModalBottomSheet v Jetpack Compose má veľa parametrov na prispôsobenie, dva z nich sú povinné.

Povinné parametre

  • sheetContent - composable, obsahujúci obsah z bottom sheetu
  • content - composable, obsahujúci obsah obrazovky za spodným listom. Tento obsah je prekrytý scrimColor, keď je bottom sheet v stave Expanded

Voliteľné parametre

  • sheetState - riadi stav ModalBottomSheet
  • modifier - používa sa na zmeny z caller side
  • sidesheetShape - tvar spodného listu napr. *RoundedCornerShape*(topStart = 24.*dp*, topEnd = 24.*dp*)
  • sheetElevation - výška spodného listu v dpsheetBackgroundColor - farba pozadia spodného listu, predvolene nastavená na povrchovú farbu
  • sheetContentColor - farba obsahu kontrastujúca s farbou pozadia, predvolená hodnota vypočíta sa pomocou contentColorFor funkcie
  • scrimColor – farba prekrytia aplikovaná na obsah, keď je viditeľný bottom sheet
Správanie bottom sheetu

Ako otvoriť ModalBottomSheet kliknutím na tlačidlo?

Pre animovaný prechod ModalBottomSheet sú pripravené funkcie show() a hide(), ktoré možno volať na modalBottomSheetState. Ide o suspend funkciu, pretože na ich použitie je potrebná animácia spustená ako coroutine, scope alebo LaunchedEffect.

Ako zakázať stav Half Expanded v ModalBottomSheet?

V niektorých prípadoch stav HalfExpanded nie je žiaduci a našťastie existuje spôsob, ako ho zakázať vrátením hodnoty false v lambda confirmStateChange.

Ďalšie články zo série Jetpack Compose Basics:

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.