Jetpack Compose 脚手架 + 底部模态窗口

Question

我正在尝试使用Compose设计一个布局，其中包括：

1. TopAppBar
2. 正文（内容）
3. BottomAppBar
4. 表示菜单的底部抽屉（模态底部抽屉）

-------TopAppBar-------

------MainContent------

------BottomAppBar-----

----ModalBottomSheet---

Compose提供了3个组件：

1. Scaffold
2. BottomSheetScaffold
3. ModalBottomSheetLayout

Scaffold没有底部抽屉属性

BottomSheetScaffold没有BottomAppBar属性

ModalBottomSheetLayout只有content和sheetContent

我应该将这些组件中的哪一个结合起来，以何种结构实现我的要求？

Scaffold(
  topBar = { TopBar() },
  content = { innerPadding -> Body(innerPadding) },
  bottomAppbar = { BottomAppBar() }
)
ModalBottomSheetLayout(
  sheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden
  ),
  sheetContent = { SheetContent() },
)
BottomSheetScaffold(
  scaffoldState = ...,
  sheetContent = { SheetContent() },
  content = { ScreenContent() },
)

- Arrowsome

Answer 1

你可以使用类似以下的代码：

val bottomState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
ModalBottomSheetLayout(
    sheetState = bottomState,
    sheetContent = {
        //. sheetContent
    }
) {
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "TopAppBar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(modifier = Modifier) {
                IconButton(
                    onClick = {
                        coroutineScope.launch { bottomState.show() }  
                    }
                ) {
                    Icon(Icons.Filled.Menu, contentDescription = "Localized description")
                }
            }
        },

        content = { innerPadding ->
            //...main content
        }
    )
}

- Gabriele Mariotti

---

我们可以使用 rememberBottomSheetScaffoldState 结合 bottomSheetState 和 drawerState。如何使用 rememberModalBottomSheetState 实现 Modal Bottom Sheet 和 Drawer 的组合？ - Pitos