将 CoordinatorLayout 迁移到 Compose

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

在 Compose 中，CoordinatorLayout 的最接近等效项是 Scaffold。Scaffold 提供用于合并 Material 的内容槽位 将各种组件转化为常见屏幕模式和交互方式。本页将介绍 您可以将 CoordinatorLayout 实现迁移至使用 Scaffold 写邮件。

迁移步骤

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

  1. 在以下代码段中，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" />

  2. 在您的 fragment 或 activity 中，获取对您之前创建的 ComposeView 的引用， 对该对象调用 setContent 方法。在该方法正文中， 将 Scaffold 设置为其内容：

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

  3. 在您的Scaffold的内容中，添加屏幕的主要内容 。由于上述 XML 中的主要内容是 ViewPager2，因此我们将使用 HorizontalPager，它与 Compose 等效。content lambda Scaffold 也会收到一个 PaddingValues 实例，该实例应是 应用于内容根。您可以使用Modifier.padding来应用 PaddingValues 到 HorizontalPager。

    composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}
    MigrationCommonScenariosSnippets.kt

  4. 利用 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 */ }
    }
}
    MigrationCommonScenariosSnippets.kt

常见用例

收起和展开工具栏

在 View 系统中，如需使用 CoordinatorLayout 收起和展开工具栏，请执行以下操作： 您可以使用 AppBarLayout 作为工具栏的容器。然后，您可以指定 针对关联的可滚动对象，在 XML 中从 Behavior 到 layout_behavior 视图（如 RecyclerView 或 NestedScrollView），以声明工具栏在 会在滚动时收起/展开。

在 Compose 中，您可以通过 TopAppBarScrollBehavior。例如，要实现折叠/展开 工具栏以使该工具栏在您向上滚动时显示，请按以下步骤操作：

  1. 调用 TopAppBarDefaults.enterAlwaysScrollBehavior() 以创建 TopAppBarScrollBehavior。
  2. 将创建的 TopAppBarScrollBehavior 提供给 TopAppBar。

  3. 通过 Modifier.nestedScroll 上的 Modifier.nestedScroll 连接 NestedScrollConnection Scaffold，以便 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 */
    // ...
}
    MigrationCommonScenariosSnippets.kt

自定义收起/展开滚动效果

您可以为 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
        // ...
    }
}
MigrationCommonScenariosSnippets.kt

如需了解详情，请参阅抽屉式导航栏。

信息提示控件

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
    // ...
}
MigrationCommonScenariosSnippets.kt

如需了解详情，请参阅信息条。

了解详情

如需详细了解如何将 CoordinatorLayout 迁移到 Compose，请参阅 以下资源：