我可以同时使用FloatingActionButton和NavigationSuiteScaffold吗？

Question

我正在使用 NavigationSuiteScaffold 在我的应用程序中进行导航。我想向我的应用程序添加一个 FloatingActionButton，同时仍具有针对小屏幕和大屏幕的自适应导航，但我不知道如何将通常位于 Scaffold 中的元素添加到我的应用程序中。

• NavigationSuiteScaffold

  没有浮动操作按钮（和栏）的参数

• 在

  Scaffold

  内添加

  NavigationSuiteScaffold

  无法在大屏幕上正确显示
  示例图片

有没有办法在使用自适应导航时根据材料设计指南显示 FAB？

Answer 1

不幸的是，目前这是不可能的。 Google 问题跟踪器上有一个开放的功能请求，设计团队正在调查它。您可以发表评论并为该问题点赞，以引起更多关注。

同时，您可以自己实现如下：

NavigationSuiteScaffoldFab.kt

@Composable
fun NavigationSuiteScaffoldFab(
    navigationSuiteItems: NavigationSuiteScope.() -> Unit,
    modifier: Modifier = Modifier,
    layoutType: NavigationSuiteType =
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(currentWindowAdaptiveInfo()),
    navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors(),
    containerColor: Color = NavigationSuiteScaffoldDefaults.containerColor,
    contentColor: Color = NavigationSuiteScaffoldDefaults.contentColor,
    floatingActionButton: @Composable () -> Unit = {},
    content: @Composable () -> Unit = {},
) {
    Surface(modifier = modifier, color = containerColor, contentColor = contentColor) {
        NavigationSuiteScaffoldLayout(
            navigationSuite = {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    if (layoutType == NavigationSuiteType.NavigationRail || layoutType == NavigationSuiteType.NavigationDrawer) {
                        Box(
                            modifier = Modifier.padding(16.dp)
                        ) {
                            floatingActionButton()
                        }
                    }
                    NavigationSuite(
                        layoutType = layoutType,
                        colors = navigationSuiteColors,
                        content = navigationSuiteItems
                    )
                }

            },
            layoutType = layoutType,
            content = {
                Scaffold(
                    modifier = Modifier.consumeWindowInsets(
                        when (layoutType) {
                            NavigationSuiteType.NavigationBar ->
                                NavigationBarDefaults.windowInsets.only(WindowInsetsSides.Bottom)
                            NavigationSuiteType.NavigationRail ->
                                NavigationRailDefaults.windowInsets.only(WindowInsetsSides.Start)
                            NavigationSuiteType.NavigationDrawer ->
                                DrawerDefaults.windowInsets.only(WindowInsetsSides.Start)
                            else -> WindowInsets(0, 0, 0, 0)
                        }
                    ),
                    floatingActionButton = {
                        if (layoutType == NavigationSuiteType.NavigationBar) {
                            floatingActionButton()
                        }
                    }
                ) {
                    Box(modifier = Modifier.padding(it)) {
                        content()
                    }
                }
            }
        )
    }
}

用法

@Composable
fun NavigationSuiteDemo() {

    var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }

    NavigationSuiteScaffoldFab(
        navigationSuiteItems = {
            AppDestinations.entries.forEach {
                item(
                    icon = {
                        Icon(
                            it.icon,
                            contentDescription = stringResource(it.contentDescription)
                        )
                    },
                    label = { Text(stringResource(it.label)) },
                    selected = it == currentDestination,
                    onClick = { currentDestination = it }
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {}
            ) {
                Icon(Icons.Filled.Edit, "")
            }
        }
    ) {
        // TODO: Destination content.
    }
}

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites),
    SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping),
    PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile),
}

输出：