辅助窗格规范化布局可将用户的注意力集中在应用的主要功能上 同时显示相关的辅助内容。例如,主 内容窗格可能会显示有关近期电影的信息,同时 窗格,其中会列出具有类似或相同主题的其他电影。 导演或主演。详细了解辅助窗格 规范布局,请参阅 Material 3 辅助窗格指南。
实现辅助窗格
SupportingPaneScaffold
最多包含三个
窗格:主窗格、辅助窗格和可选的额外窗格。基架
处理为三个窗格分配窗口空间的所有计算。已开启
大屏幕时,Scaffold 会显示主窗格,同时打开辅助窗格
。在小屏幕上,Scaffold 显示主要屏幕或辅助屏幕
全屏显示。
![主要内容占据大部分显示屏,旁边则是辅助内容。](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=6&hl=ro)
添加依赖项
SupportingPaneScaffold
是
Material 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'
- 自适应 - 低层级构建块,例如
HingeInfo
和Posture
- adaptive-layout - 自适应布局,例如
SupportingPaneScaffold
- adaptive-navigation - 用于在和 在窗格之间
创建导航器和基架
在小窗口中,一次只能显示一个窗格,因此请使用
ThreePaneScaffoldNavigator
(用于移入/移出)
窗格。使用以下代码创建导航器实例:
rememberSupportingPaneScaffoldNavigator
。
要处理返回手势,请使用 BackHandler
,用于检查
canNavigateBack()
和通话
navigateBack()
:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
基架需要 PaneScaffoldDirective
,
控制如何拆分屏幕以及使用的间距;
ThreePaneScaffoldValue
,用于提供当前的
窗格的状态(例如,是展开还是隐藏)。对于默认
行为,请使用导航器的 scaffoldDirective
和
scaffoldValue
:
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() }, )