I'm trying to design a layout using Compose that consists of:
- TopAppBar
- Body (content)
- BottomAppBar
- A Bottom Sheet that represents a menu when clicked (Modal Bottom Sheet)
-------TopAppBar-------
------MainContent------
------BottomAppBar-----
----ModalBottomSheet---
Compose offers 3 components:
- Scaffold
- BottomSheetScaffold
- ModalBottomSheetLayout
Scaffold has no bottom sheet property
BottomSheetScaffold has no BottomAppBar property
ModalBottomSheetLayout has only content and sheetContent
Which of these components should I combine and in what **structure** to achieve what I want?
Scaffold(
topBar = { TopBar() },
content = { innerPadding -> Body(innerPadding) },
bottomAppbar = { BottomAppBar() }
)
ModalBottomSheetLayout(
sheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden
),
sheetContent = { SheetContent() },
)
BottomSheetScaffold(
scaffoldState = ...,
sheetContent = { SheetContent() },
content = { ScreenContent() },
)
You can use something like: