我应该在每个屏幕中使用 Scaffold 吗？在撰写中使用 topBar、bottomBar、drawer 等时的最佳实践是什么

Question

我正在编写一个纯粹的 Android 应用程序，并且我在每个屏幕中使用脚手架来实现 topBar、bottomBar、fab 等。

我的问题是我应该在每个屏幕中使用脚手架还是仅在 MainActivity 中使用？使用可组合项的最佳实践是什么？我可以在脚手架内部使用脚手架吗？

我进行了很多研究，但没有在任何地方找到答案，即使 jetpack compose 示例应用程序也没有提供有关在 jetpack compose 中构建应用程序的最佳实践的任何内容。请任何人帮助我。

我的代码看起来像这样

主要活动

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            PasswordManagerApp()
        }
    }
}

@Composable
fun PasswordManagerApp() {


    val mainViewModel: MainViewModel = hiltViewModel()
    val navController = rememberNavController()
    val systemUiController = rememberSystemUiController()
    val scaffoldState = rememberScaffoldState()
    val coroutineScope = rememberCoroutineScope()

    Theme(
        darkTheme = mainViewModel.storedAppTheme.value
    ) {

        Scaffold(
            scaffoldState = scaffoldState,
            snackbarHost = { scaffoldState.snackbarHostState }
        ) {

            Box(modifier = Modifier) {

                AppNavGraph(
                    mainViewModel = mainViewModel,
                    navController = navController,
                    scaffoldState = scaffoldState
                )

                DefaultSnackbar(
                    snackbarHostState = scaffoldState.snackbarHostState,
                    onDismiss = { scaffoldState.snackbarHostState.currentSnackbarData?.dismiss() },
                    modifier = Modifier.align(Alignment.BottomCenter)
                )

            }


        }
    }
}

屏幕 1：

@Composable
fun LoginsScreen(
    ...
) {


    ...

    Scaffold(
        topBar = {
            HomeTopAppBar(
                topAppBarTitle = LoginsScreen.AllLogins.label,
                onMenuIconClick = {},
                switchState = viewModel.switch.value,
                onSwitchIconClick = { viewModel.setSwitch(it) },
                onSettingsIconClick = {navigateToSettings()}
            )
        },
        scaffoldState = scaffoldState,
        snackbarHost = { scaffoldState.snackbarHostState },
        floatingActionButton = {
            MyFloatingBtn(
                onClick = { navigateToNewItem() }
            )
        },
        drawerContent = {
            //MyDrawer()
        },
        bottomBar = {
            MyBottomBar(
                navController = navController,
                currentRoute = currentRoute,
                navigateToAllLogins = navigateToAllLogins,
                navigateToAllCards = navigateToAllCards,
                navigateToAllOthers = navigateToAllOthers,
            )

        },
        floatingActionButtonPosition = FabPosition.End,
        isFloatingActionButtonDocked = false,

        ) {

        Box(modifier = Modifier.fillMaxSize()) {

            Column(
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(bottom = 48.dp)
                    .verticalScroll(scrollState)
            ) {...}


        }


    }

屏幕 2：

@Composable
fun CardsScreen(
    ...
) {

    ...

    Scaffold(
        topBar = {
            HomeTopAppBar(
                topAppBarTitle = CardsScreen.AllCards.label,
                onMenuIconClick = {},
                switchState = viewModel.switch.value,
                onSwitchIconClick = { viewModel.setSwitch(it) },
                onSettingsIconClick = {navigateToSettings()}
            )
        },
        floatingActionButton = {
            MyFloatingBtn(
                onClick = { navigateToNewItem() })
        },
        drawerContent = {
            //MyDrawer()
        },
        bottomBar = {
            MyBottomBar(
                navController = navController,
                currentRoute = currentRoute,
                navigateToAllLogins = navigateToAllLogins,
                navigateToAllCards = navigateToAllCards,
                navigateToAllOthers = navigateToAllOthers,
            )
        },
        floatingActionButtonPosition = FabPosition.End,
        isFloatingActionButtonDocked = false
    ) {

        Column(
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .padding(bottom = 48.dp)
                .verticalScroll(scrollState)
        ) {...}


           

}

Answer 1

正如评论中所说，两种方法都是有效的。当然，您可以在另一个 Scaffold 中使用 Scaffold，就像Google 的示例 Jetnews 应用程序中一样

如果您想要“漂亮”的屏幕转换，而仅内容更改，则在顶级脚手架中定义组件（例如，抽屉菜单通常在顶级脚手架中共享）。工具栏/应用程序栏更容易在每个屏幕（内部支架）上实现，不仅在 Jetpack Compose 中，因为它们通常具有不同的标题、操作按钮等。

在没有专用工具栏的简单应用程序中，只能使用一个支架。