将 CoordinatorLayout 迁移到 Compose

CoordinatorLayout 是一种 ViewGroup,支持复杂、重叠和 嵌套布局。它用作容器来启用特定的 Material Design 互动,例如展开/收起工具栏和底部动作条,适用于 View 其中包含的数据

在 Compose 中,与 CoordinatorLayout 最接近的等效项是 ScaffoldScaffold 提供了内容槽,用于将 Material 组件组合成常见的屏幕图案和互动。本页将介绍 您可以将 CoordinatorLayout 实现迁移至使用 Scaffold 写邮件。

迁移步骤

如需将 CoordinatorLayout 迁移到 Scaffold,请按以下步骤操作:

  1. 在以下代码段中,CoordinatorLayout 包含一个 AppBarLayout, 包含 ToolBarViewPagerFloatingActionButton。注释 从界面层次结构中移出 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" />
    
  2. 在您的 fragment 或 activity 中,获取对您之前创建的 ComposeView 的引用, 对该对象调用 setContent 方法。在方法正文中,将 Scaffold 设置为其内容:

    composeView.setContent {
        Scaffold(Modifier.fillMaxSize()) { contentPadding ->
            // Scaffold contents
            // ...
        }
    }

  3. Scaffold 的内容中,添加屏幕的主要内容。由于上述 XML 中的主要内容是 ViewPager2,因此我们将使用 HorizontalPager,这是 Compose 中等效的元素。Scaffoldcontent 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 */ }
        }
    }

  4. 使用 Scaffold 提供的其他内容槽来添加更多屏幕元素并迁移其余子视图。您可以使用 topBar 槽向 TopAppBarfloatingActionButton 槽位,用于提供 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 用作工具栏的容器。然后,您可以在 XML 中通过 layout_behavior 在关联的可滚动 View(例如 RecyclerViewNestedScrollView)上指定 Behavior,以声明工具栏在滚动时收起/展开的方式。

在 Compose 中,您可以通过 TopAppBarScrollBehavior 实现类似的效果。例如,如需实现收起/展开的工具栏,以便在您滚动向上时显示工具栏,请按以下步骤操作:

  1. 调用 TopAppBarDefaults.enterAlwaysScrollBehavior() 以创建 TopAppBarScrollBehavior
  2. 将创建的 TopAppBarScrollBehavior 提供给 TopAppBar
  3. 通过 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 作为根视图。反过来,您的 CoordinatorLayoutDrawerLayout 的子视图。DrawerLayout 还包含另一个子视图(例如 NavigationView),用于在抽屉中显示导航选项。

在 Compose 中,您可以使用 ModalNavigationDrawer 可组合项实现抽屉式导航栏。ModalNavigationDrawer提供 drawerContent 槽位用于抽屉式导航栏,content 槽位用于屏幕 内容。

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            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,请参阅以下资源: