Jetpack Compose 脚手架 + 模态底片 [英] Jetpack Compose Scaffold + Modal Bottom Sheet

问题描述

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

I'm trying to design a layout using Compose that consists of:

1. TopAppBar
2. 正文(内容)
3. 底部应用栏
4. 单击时表示菜单的底部工作表(模态底部工作表)

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

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

------主要内容------

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

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

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

----ModalBottomSheet---

----ModalBottomSheet---

Compose 提供 3 个组件:

Compose offers 3 components:

1. 脚手架
2. BottomSheetScaffold
3. ModalBottomSheetLayout

脚手架没有底片属性

BottomSheetScaffold 没有 BottomAppBar 属性

BottomSheetScaffold has no BottomAppBar property

ModalBottomSheetLayout 只有 content 和 sheetContent

ModalBottomSheetLayout has only content and sheetContent

我应该组合这些组件中的哪些以及以什么**结构**来实现我想要的?

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

推荐答案

您可以使用以下内容:

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
        }
    )
}

这篇关于Jetpack Compose 脚手架 + 模态底片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！