将 CoordinatorLayout 迁移到 Compose

CoordinatorLayout 是一个 ViewGroup，它支持复杂、重叠和嵌套的布局。它用作容器，以支持特定的 Material Design 交互，例如展开/折叠工具栏和底页，用于其中包含的视图。

在 Compose 中，CoordinatorLayout 最接近的等效项是 Scaffold。 Scaffold 提供内容槽，用于将 Material 组件组合到常见的屏幕模式和交互中。此页面介绍如何将您的 CoordinatorLayout 实现迁移到在 Compose 中使用 Scaffold。

迁移步骤

要将 CoordinatorLayout 迁移到 Scaffold，请按照以下步骤操作

在下面的代码段中，CoordinatorLayout 包含一个 AppBarLayout，用于包含 ToolBar、ViewPager 和 FloatingActionButton。将 CoordinatorLayout 及其子项从您的 UI 层次结构中注释掉，并添加一个 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
        // ...
    }
}MigrationCommonScenariosSnippets.kt

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

使用 Scaffold 提供的其他内容槽来添加更多屏幕元素并迁移剩余的子视图。您可以使用 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

常见用例

折叠和展开工具栏

在视图系统中，要使用 CoordinatorLayout 折叠和展开工具栏，您可以使用 AppBarLayout 作为工具栏的容器。然后，您可以通过关联的可滚动视图（如 RecyclerView 或 NestedScrollView）上的 XML 中的 layout_behavior 指定 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 */
    // ...
}MigrationCommonScenariosSnippets.kt

自定义折叠/展开滚动效果

您可以为 enterAlwaysScrollBehavior 提供多个参数来自定义折叠/展开动画效果。TopAppBarDefaults 还提供其他 TopAppBarScrollBehavior，例如 exitUntilCollapsedScrollBehavior，它只在内容完全向下滚动时展开应用栏。

要创建完全自定义的效果（例如视差效果），您还可以创建自己的 NestedScrollConnection 并随着内容滚动手动偏移工具栏。请参阅 AOSP 上的嵌套滚动示例以获取代码示例。

抽屉

使用视图，您可以通过使用 DrawerLayout 作为根视图来实现导航抽屉。反过来，您的 CoordinatorLayout 是 DrawerLayout 的子视图。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
        // ...
    }
}MigrationCommonScenariosSnippets.kt

请参阅抽屉以了解更多信息。

Snackbar

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

请参阅 Snackbar 以了解更多信息。

了解更多

有关将 CoordinatorLayout 迁移到 Compose 的更多信息，请参阅以下资源

Material 组件和布局：关于 Compose 中支持的 Material Design 组件（如 Scaffold）的文档。
将 Sunflower 迁移到 Jetpack Compose：一篇博客文章，记录了 Sunflower 示例应用（包含 CoordinatorLayout）从视图到 Compose 的迁移过程。

为您推荐

注意：当 JavaScript 关闭时显示链接文本
Material 组件和布局
Compose 中的窗口内边距
滚动