Перенос координатораLayout в Compose

CoordinatorLayout — это ViewGroup , которая позволяет создавать сложные, перекрывающиеся и вложенные макеты. Он используется в качестве контейнера для включения определенных взаимодействий Material Design, таких как развертывание/сворачивание панелей инструментов и нижних листов, для View, содержащихся в нем.

В Compose ближайшим эквивалентом CoordinatorLayout является Scaffold . Scaffold предоставляет слоты контента для объединения Material Components в общие шаблоны экрана и взаимодействия. На этой странице описывается, как можно перенести реализацию CoordinatorLayout для использования Scaffold в Compose.

Этапы миграции

Чтобы перенести 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" />
   

   Примечание: Поскольку CoordinatorLayout является ViewGroup , лучше всего перенести все его дочерние представления в Compose одновременно или до этого шага, в зависимости от вашей стратегии миграции . Однако, если вы не можете этого сделать, вы можете добавить AndroidView для использования представлений в Compose. Подробнее см. в разделе Использование представлений в Compose .

2. В вашем фрагменте или активности получите ссылку на ComposeView , который вы только что добавили, и вызовите метод setContent для него. В теле метода установите Scaffold в качестве его содержимого:

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

3. В содержимом вашего Scaffold добавьте в него основное содержимое вашего экрана. Поскольку основное содержимое в XML выше — это ViewPager2 , мы будем использовать HorizontalPager , который является его эквивалентом в Compose. Лямбда-функция content 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 , чтобы добавить больше элементов экрана и перенести оставшиеся дочерние Views. Вы можете использовать слот 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 в качестве контейнера для панели инструментов. Затем вы можете указать Behavior через layout_behavior в XML для связанного прокручиваемого View (например, RecyclerView или NestedScrollView ), чтобы объявить, как панель инструментов сворачивается/разворачивается при прокрутке.

В Compose вы можете добиться похожего эффекта с помощью TopAppBarScrollBehavior . Например, чтобы реализовать сворачивающуюся/разворачивающуюся панель инструментов, чтобы она появлялась при прокрутке вверх, выполните следующие действия:

1. Вызовите TopAppBarDefaults.enterAlwaysScrollBehavior() для создания TopAppBarScrollBehavior .
2. Предоставьте созданный TopAppBarScrollBehavior для TopAppBar .

3. Подключите NestedScrollConnection через Modifier.nestedScroll на 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

Примечание: Если вы используете компоненты Material 2, вам необходимо вручную реализовать сворачивающуюся/разворачивающуюся панель инструментов самостоятельно. В качестве альтернативы вы можете использовать CoordinatorLayout в качестве внешнего макета для вашего ComposeView . Этот метод задокументирован в блоге Migrating Sunflower to Jetpack Compose .

Настройте эффект сворачивания/разворачивания прокрутки

Вы можете указать несколько параметров для enterAlwaysScrollBehavior , чтобы настроить эффект анимации сворачивания/разворачивания. TopAppBarDefaults также предоставляет другие TopAppBarScrollBehavior , такие как exitUntilCollapsedScrollBehavior , который разворачивает панель приложения только тогда, когда содержимое прокручено до конца вниз.

Чтобы создать полностью пользовательский эффект (например, эффект параллакса), вы также можете создать свой собственный NestedScrollConnection и вручную смещать панель инструментов по мере прокрутки контента. См. пример кода Nested scroll на AOSP.

Ящики

С помощью Views вы реализуете навигационный ящик , используя 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

Подробнее см. в разделе Ящики .

Закусочные

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 можно найти в следующих ресурсах:

• Компоненты и макеты Material : документация по компонентам Material Design, которые поддерживаются в Compose, например Scaffold .
• Миграция Sunflower в Jetpack Compose : запись в блоге, в которой описывается процесс миграции с Views на Compose примера приложения Sunflower, содержащего CoordinatorLayout .

{% дословно %} {% endverbatim %} ,

CoordinatorLayout — это ViewGroup , которая позволяет создавать сложные, перекрывающиеся и вложенные макеты. Он используется в качестве контейнера для включения определенных взаимодействий Material Design, таких как развертывание/сворачивание панелей инструментов и нижних листов, для View, содержащихся в нем.

В Compose ближайшим эквивалентом CoordinatorLayout является Scaffold . Scaffold предоставляет слоты контента для объединения Material Components в общие шаблоны экрана и взаимодействия. На этой странице описывается, как можно перенести реализацию CoordinatorLayout для использования Scaffold в Compose.

Этапы миграции

Чтобы перенести 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" />
   

   Примечание: Поскольку CoordinatorLayout является ViewGroup , лучше всего перенести все его дочерние представления в Compose одновременно или до этого шага, в зависимости от вашей стратегии миграции . Однако, если вы не можете этого сделать, вы можете добавить AndroidView для использования представлений в Compose. Подробнее см. в разделе Использование представлений в Compose .

2. В вашем фрагменте или активности получите ссылку на ComposeView , который вы только что добавили, и вызовите метод setContent для него. В теле метода установите Scaffold в качестве его содержимого:

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

3. В содержимом вашего Scaffold добавьте в него основное содержимое вашего экрана. Поскольку основное содержимое в XML выше — это ViewPager2 , мы будем использовать HorizontalPager , который является его эквивалентом в Compose. Лямбда-функция content 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 , чтобы добавить больше элементов экрана и перенести оставшиеся дочерние Views. Вы можете использовать слот 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 в качестве контейнера для панели инструментов. Затем вы можете указать Behavior через layout_behavior в XML для связанного прокручиваемого View (например, RecyclerView или NestedScrollView ), чтобы объявить, как панель инструментов сворачивается/разворачивается при прокрутке.

В Compose вы можете добиться похожего эффекта с помощью TopAppBarScrollBehavior . Например, чтобы реализовать сворачивающуюся/разворачивающуюся панель инструментов, чтобы она появлялась при прокрутке вверх, выполните следующие действия:

1. Вызовите TopAppBarDefaults.enterAlwaysScrollBehavior() для создания TopAppBarScrollBehavior .
2. Предоставьте созданный TopAppBarScrollBehavior для TopAppBar .

3. Подключите NestedScrollConnection через Modifier.nestedScroll на 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

Примечание: Если вы используете компоненты Material 2, вам необходимо вручную реализовать сворачивающуюся/разворачивающуюся панель инструментов самостоятельно. В качестве альтернативы вы можете использовать CoordinatorLayout в качестве внешнего макета для вашего ComposeView . Этот метод задокументирован в блоге Migrating Sunflower to Jetpack Compose .

Настройте эффект сворачивания/разворачивания прокрутки

Вы можете указать несколько параметров для enterAlwaysScrollBehavior , чтобы настроить эффект анимации сворачивания/разворачивания. TopAppBarDefaults также предоставляет другие TopAppBarScrollBehavior , такие как exitUntilCollapsedScrollBehavior , который разворачивает панель приложения только тогда, когда содержимое прокручено до конца вниз.

Чтобы создать полностью пользовательский эффект (например, эффект параллакса), вы также можете создать свой собственный NestedScrollConnection и вручную смещать панель инструментов по мере прокрутки контента. См. пример кода Nested scroll на AOSP.

Ящики

С помощью Views вы реализуете навигационный ящик , используя 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

Подробнее см. в разделе Ящики .

Закусочные

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 можно найти в следующих ресурсах:

• Компоненты и макеты Material : документация по компонентам Material Design, которые поддерживаются в Compose, например Scaffold .
• Миграция Sunflower в Jetpack Compose : запись в блоге, в которой описывается процесс миграции с Views на Compose примера приложения Sunflower, содержащего CoordinatorLayout .

{% дословно %} {% endverbatim %} ,

CoordinatorLayout — это ViewGroup , которая позволяет создавать сложные, перекрывающиеся и вложенные макеты. Он используется в качестве контейнера для включения определенных взаимодействий Material Design, таких как развертывание/сворачивание панелей инструментов и нижних листов, для View, содержащихся в нем.

В Compose ближайшим эквивалентом CoordinatorLayout является Scaffold . Scaffold предоставляет слоты контента для объединения Material Components в общие шаблоны экрана и взаимодействия. На этой странице описывается, как можно перенести реализацию CoordinatorLayout для использования Scaffold в Compose.

Этапы миграции

Чтобы перенести 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" />
   

   Примечание: Поскольку CoordinatorLayout является ViewGroup , лучше всего перенести все его дочерние представления в Compose одновременно или до этого шага, в зависимости от вашей стратегии миграции . Однако, если вы не можете этого сделать, вы можете добавить AndroidView для использования представлений в Compose. Подробнее см. в разделе Использование представлений в Compose .

2. В вашем фрагменте или активности получите ссылку на ComposeView , который вы только что добавили, и вызовите метод setContent для него. В теле метода установите Scaffold в качестве его содержимого:

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

3. В содержимом вашего Scaffold добавьте в него основное содержимое вашего экрана. Поскольку основное содержимое в XML выше — это ViewPager2 , мы будем использовать HorizontalPager , который является его эквивалентом в Compose. Лямбда-функция content 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 , чтобы добавить больше элементов экрана и перенести оставшиеся дочерние Views. Вы можете использовать слот 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 в качестве контейнера для панели инструментов. Затем вы можете указать Behavior через layout_behavior в XML для связанного прокручиваемого View (например, RecyclerView или NestedScrollView ), чтобы объявить, как панель инструментов сворачивается/разворачивается при прокрутке.

В Compose вы можете добиться похожего эффекта с помощью TopAppBarScrollBehavior . Например, чтобы реализовать сворачивающуюся/разворачивающуюся панель инструментов, чтобы она появлялась при прокрутке вверх, выполните следующие действия:

1. Вызовите TopAppBarDefaults.enterAlwaysScrollBehavior() для создания TopAppBarScrollBehavior .
2. Предоставьте созданный TopAppBarScrollBehavior для TopAppBar .

3. Подключите NestedScrollConnection через Modifier.nestedScroll на 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

Примечание: Если вы используете компоненты Material 2, вам необходимо вручную реализовать сворачивающуюся/разворачивающуюся панель инструментов самостоятельно. В качестве альтернативы вы можете использовать CoordinatorLayout в качестве внешнего макета для вашего ComposeView . Этот метод задокументирован в блоге Migrating Sunflower to Jetpack Compose .

Настройте эффект сворачивания/разворачивания прокрутки

Вы можете указать несколько параметров для enterAlwaysScrollBehavior , чтобы настроить эффект анимации сворачивания/разворачивания. TopAppBarDefaults также предоставляет другие TopAppBarScrollBehavior , такие как exitUntilCollapsedScrollBehavior , который разворачивает панель приложения только тогда, когда содержимое прокручено до конца вниз.

Чтобы создать полностью пользовательский эффект (например, эффект параллакса), вы также можете создать свой собственный NestedScrollConnection и вручную смещать панель инструментов по мере прокрутки контента. См. пример кода Nested scroll на AOSP.

Ящики

С помощью Views вы реализуете навигационный ящик , используя 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

Подробнее см. в разделе Ящики .

Закусочные

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 можно найти в следующих ресурсах:

• Компоненты и макеты Material : документация по компонентам Material Design, которые поддерживаются в Compose, например Scaffold .
• Миграция Sunflower в Jetpack Compose : запись в блоге, в которой описывается процесс миграции с Views на Compose примера приложения Sunflower, содержащего CoordinatorLayout .

{% дословно %} {% endverbatim %}