构建辅助窗格布局

辅助窗格规范布局可将用户的注意力集中在应用的主要内容上,同时显示相关的辅助内容。例如,主 内容窗格可能会显示有关近期电影的信息,同时 窗格,其中会列出具有类似或相同主题的其他电影。 导演或主演。如需详细了解辅助窗格规范布局,请参阅 Material 3 辅助窗格指南

实现辅助窗格

SupportingPaneScaffold 最多由三个窗格组成:一个主要窗格、一个辅助窗格和一个可选的额外窗格。该框架会处理将窗口空间分配给三个窗格的所有计算。已开启 大屏幕时,Scaffold 会显示主窗格,同时打开辅助窗格 。在小屏幕上,框架会全屏显示主窗格或辅助窗格。

主要内容占据大部分显示屏,旁边则是辅助内容。
图 1. 辅助窗格布局。

添加依赖项

SupportingPaneScaffoldMaterial 3 自适应布局库的一部分。

将以下三个相关的依赖项添加到 build.gradle 应用或模块:

Kotlin

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

Groovy

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
  • 自适应 - 低层级构建块,例如 HingeInfoPosture
  • adaptive-layout - 自适应布局,例如 SupportingPaneScaffold
  • adaptive-navigation - 用于在和 在窗格之间

创建导航器和基架

在小窗口中,一次只能显示一个窗格,因此请使用 ThreePaneScaffoldNavigator(用于移入/移出) 窗格。使用以下代码创建导航器实例: rememberSupportingPaneScaffoldNavigator。 要处理返回手势,请使用 BackHandler,用于检查 canNavigateBack() 和通话 navigateBack()

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

基架需要 PaneScaffoldDirective, 控制如何拆分屏幕以及使用的间距; ThreePaneScaffoldValue,用于提供当前的 窗格的状态(例如,是展开还是隐藏)。对于默认 行为,请使用导航器的 scaffoldDirectivescaffoldValue

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)

主窗格和辅助窗格是包含内容的可组合项。使用 AnimatedPane 在导航期间应用默认窗格动画。使用 Scaffold 值检查辅助窗格是否 已隐藏;如果是,则显示一个按钮 navigateTo(ThreePaneScaffoldRole.Secondary),用于显示 辅助窗格

下面是该架构的完整实现:

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Main pane content
            if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier.wrapContentSize(),
                    onClick = {
                        navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Supporting pane content
            Text("Supporting pane")
        }
    },
)

提取窗格可组合项

SupportingPaneScaffold 的各个窗格提取到它们自己的窗格中 使它们可重复使用且可测试。使用 ThreePaneScaffoldScope,用于在以下情况下访问AnimatedPane: 您想要默认动画:

@Composable
fun ThreePaneScaffoldScope.MainPane(
    shouldShowSupportingPaneButton: Boolean,
    onNavigateToSupportingPane: () -> Unit,
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Main pane content
        if (shouldShowSupportingPaneButton) {
            Button(onClick = onNavigateToSupportingPane) {
                Text("Show supporting pane")
            }
        } else {
            Text("Supporting pane is shown")
        }
    }
}

@Composable
fun ThreePaneScaffoldScope.SupportingPane(
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Supporting pane content
        Text("This is the supporting pane")
    }
}

将窗格提取到可组合项中可以简化 SupportingPaneScaffold(将以下内容与完整实现进行比较 中 Scaffold 的相应值):

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) }
        )
    },
    supportingPane = { SupportingPane() },
)