CoordinatorLayout
是一个 ViewGroup
,可实现复杂、重叠和嵌套布局。它用作容器,用于针对其中包含的 View 启用特定的 Material Design 互动,例如展开/收起工具栏和底部动作条。
在 Compose 中,CoordinatorLayout
最接近的等效项是 Scaffold
。Scaffold
提供了内容槽,用于将 Material 组件组合成常见的屏幕图案和互动。本页介绍了如何迁移 CoordinatorLayout
实现以在 Compose 中使用 Scaffold
。
迁移步骤
如需将 CoordinatorLayout
迁移到 Scaffold
,请按以下步骤操作:
在下面的代码段中,
CoordinatorLayout
包含一个AppBarLayout
,其中包含一个ToolBar
、一个ViewPager
和一个FloatingActionButton
。从界面层次结构中注释掉CoordinatorLayout
及其子项,并添加ComposeView
来替换它。<!-- <androidx.coordinatorlayout.widget.CoordinatorLayout--> <!-- android:id="@+id/coordinator_layout"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="match_parent"--> <!-- android:fitsSystemWindows="true">--> <!-- <androidx.compose.ui.platform.ComposeView--> <!-- android:id="@+id/compose_view"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="match_parent"--> <!-- app:layout_behavior="@string/appbar_scrolling_view_behavior" />--> <!-- <com.google.android.material.appbar.AppBarLayout--> <!-- android:id="@+id/app_bar_layout"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="wrap_content"--> <!-- android:fitsSystemWindows="true"--> <!-- android:theme="@style/Theme.Sunflower.AppBarOverlay">--> <!-- AppBarLayout contents here --> <!-- </com.google.android.material.appbar.AppBarLayout>--> <!-- </androidx.coordinatorlayout.widget.CoordinatorLayout>--> <androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent" />
在您的 fragment 或 activity 中,获取对您刚刚添加的
ComposeView
的引用,并对其调用setContent
方法。在该方法的正文中,将Scaffold
设置为其内容:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
在
Scaffold
的内容中,添加屏幕的主要内容。由于上述 XML 中的主要内容是ViewPager2
,因此我们将使用HorizontalPager
,这与 Compose 等效。Scaffold
的content
lambda 也会接收应应用于内容根的PaddingValues
实例。您可以使用Modifier.padding
将同一PaddingValues
应用于HorizontalPager
。composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
使用
Scaffold
提供的其他内容槽添加更多屏幕元素并迁移剩余的子 View。您可以使用topBar
槽添加TopAppBar
,使用floatingActionButton
槽提供FloatingActionButton
。composeView.setContent { Scaffold( Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("My App") } ) }, floatingActionButton = { FloatingActionButton( onClick = { /* Handle click */ } ) { Icon( Icons.Filled.Add, contentDescription = "Add Button" ) } } ) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
常见用例
收起和展开工具栏
在 View 系统中,如需使用 CoordinatorLayout
收起和展开工具栏,您可以使用 AppBarLayout
作为工具栏的容器。然后,您可以在关联的可滚动视图(如 RecyclerView
或 NestedScrollView
)的 XML 中指定一个 Behavior
到 layout_behavior
,以声明工具栏在您滚动时如何收起/展开。
在 Compose 中,您可以通过 TopAppBarScrollBehavior
实现类似的效果。例如,如需实现收起/展开工具栏,以便在您向上滚动时显示工具栏,请按以下步骤操作:
- 调用
TopAppBarDefaults.enterAlwaysScrollBehavior()
以创建TopAppBarScrollBehavior
。 - 将创建的
TopAppBarScrollBehavior
提供给TopAppBar
。 通过
Scaffold
上的Modifier.nestedScroll
连接NestedScrollConnection
,以便在可滚动内容向上/向下滚动时,Scaffold 可以接收嵌套的滚动事件。这样,所包含的应用栏就可以在内容滚动时适当地收起/展开。// 1. Create the TopAppBarScrollBehavior val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior() Scaffold( topBar = { TopAppBar( title = { Text("My App") }, // 2. Provide scrollBehavior to TopAppBar scrollBehavior = scrollBehavior ) }, // 3. Connect the scrollBehavior.nestedScrollConnection to the Scaffold modifier = Modifier .fillMaxSize() .nestedScroll(scrollBehavior.nestedScrollConnection) ) { contentPadding -> /* Contents */ // ... }
自定义收起/展开滚动效果
您可以为 enterAlwaysScrollBehavior
提供多个参数,以自定义收起/展开动画效果。TopAppBarDefaults
还会提供其他 TopAppBarScrollBehavior
,例如 exitUntilCollapsedScrollBehavior
,它仅在内容一直向下滚动时才会展开应用栏。
如需创建完全自定义的效果(例如,视差效果),您还可以创建自己的 NestedScrollConnection
,并在内容滚动时手动偏移工具栏。如需查看代码示例,请参阅 AOSP 上的嵌套滚动示例。
抽屉
借助 View,您可以通过将 DrawerLayout
用作根视图来实现抽屉式导航栏。反过来,您的 CoordinatorLayout
是 DrawerLayout
的子视图。DrawerLayout
还包含另一个子视图(例如 NavigationView
),用于在抽屉式导航栏中显示导航选项。
在 Compose 中,您可以使用 ModalNavigationDrawer
可组合项实现抽屉式导航栏。ModalNavigationDrawer
为抽屉式导航栏提供了 drawerContent
槽,并为屏幕内容提供了 content
槽。
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) Divider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold content // ... } }
如需了解详情,请参阅抽屉式导航栏。
信息提示控件
Scaffold
提供了一个 snackbarHost
槽,该槽可接受 SnackbarHost
可组合项来显示 Snackbar
。
val scope = rememberCoroutineScope() val snackbarHostState = remember { SnackbarHostState() } Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) }, floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show snackbar") }, icon = { Icon(Icons.Filled.Image, contentDescription = "") }, onClick = { scope.launch { snackbarHostState.showSnackbar("Snackbar") } } ) } ) { contentPadding -> // Screen content // ... }
如需了解详情,请参阅信息条。
了解详情
如需详细了解如何将 CoordinatorLayout
迁移到 Compose,请参阅以下资源:
- Material 组件和布局:介绍 Compose 中支持的 Material Design 组件(例如
Scaffold
)的文档。 - 将 Sunflower 迁移到 Jetpack Compose:一篇博客文章,记录了 Sunflower 示例应用从 View 到 Compose 的迁移历程,该应用包含一个
CoordinatorLayout
。
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- Material 组件和布局
- Compose 中的窗口边衬区
- 滚动