Przewiń

Modyfikatory przewijania

Modyfikatory verticalScroll i horizontalScroll to najprostszy sposób na umożliwienie użytkownikowi przewijania elementu, gdy granice jego zawartości są większe niż maksymalne ograniczenia rozmiaru. Dzięki modyfikatorom verticalScroll i horizontalScroll nie musisz tłumaczyć ani przesuwać zawartości.

@Composable
private fun ScrollBoxes() {
    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}
GesturesSnippets.kt

ScrollState umożliwia zmianę pozycji przewijania lub uzyskanie jej bieżącego stanu. Aby utworzyć go z parametrami domyślnymi, użyj elementu rememberScrollState().

@Composable
private fun ScrollBoxesSmooth() {
    // Smoothly scroll 100px on first composition
    val state = rememberScrollState()
    LaunchedEffect(Unit) { state.animateScrollTo(100) }

    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .padding(horizontal = 8.dp)
            .verticalScroll(state)
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}
GesturesSnippets.kt

Modyfikator przewijania

Modyfikator scrollable różni się od modyfikatorów przewijania tym, że scrollable wykrywa gesty przewijania i odczytuje wartości delta, ale nie przesuwa zawartości automatycznie. Zamiast tego jest ona delegowana do użytkownika za pomocą ScrollableState, która jest wymagana do prawidłowego działania tego modyfikatora.

Podczas tworzenia funkcji ScrollableState musisz podać funkcję consumeScrollDelta, która będzie wywoływana na każdym kroku przewijania (za pomocą gestów, płynnego przewijania lub przewijania szybkiego) z delta w pikselach. Ta funkcja musi zwracać odległość przewinięcia, aby zapewnić prawidłowe propagowanie zdarzenia w przypadku elementów zagnieżdżonych z modyfikatorem scrollable.

Poniższy fragment kodu wykrywa gesty i wyświetla wartość liczbową przesunięcia, ale nie przesuwa żadnych elementów:

@Composable
private fun ScrollableSample() {
    // actual composable state
    var offset by remember { mutableStateOf(0f) }
    Box(
        Modifier
            .size(150.dp)
            .scrollable(
                orientation = Orientation.Vertical,
                // Scrollable state: describes how to consume
                // scrolling delta and update offset
                state = rememberScrollableState { delta ->
                    offset += delta
                    delta
                }
            )
            .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ) {
        Text(offset.toString())
    }
}
GesturesSnippets.kt

Zagnieżdżone przewijanie

Przewijanie zagnieżdżone to system, w którym wiele elementów przewijania zawartych w sobie współpracuje ze sobą, reagując na pojedynczy gest przewijania i przekazując swoje wartości delta (zmiany).

System przewijania zagnieżdżonego umożliwia koordynację komponentów, które są przewijalne i połączone hierarchicznie (najczęściej przez udostępnianie tego samego elementu nadrzędnego). Ten system łączy kontenery przewijania i umożliwia interakcję z deltami przewijania, które są propagowane i udostępniane.

Compose oferuje wiele sposobów obsługi przewijania zagnieżdżonego między składanymi komponentami. Typowym przykładem zagnieżdżonego przewijania jest lista wewnątrz innej listy, a bardziej złożonym przypadkiem jest zwijana pasek narzędzi.

Automatyczne przewijanie zagnieżchnione

Prosty nawias imbrikowany nie wymaga od Ciebie żadnego działania. Gesty, które inicjują działanie przewijania, są automatycznie przekazywane z elementów podrzędnych do nadrzędnych. Oznacza to, że gdy dziecko nie może już dalej przewijać, gest jest obsługiwany przez element nadrzędny.

Automatyczne przewijanie zagnieżdżonych elementów jest obsługiwane i dostępne domyślnie w niektórych komponentach i modyfikatorach Compose: verticalScroll, horizontalScroll, scrollable, interfejsach API Lazy i komponentach TextField. Oznacza to, że gdy użytkownik przewinie wewnętrzne dziecko za pomocą elementów zagnieżdżonych, poprzednie modyfikatory rozpowszechnią zmiany przewijania do elementów nadrzędnych, które obsługują przewijanie zagnieżdżone.

Ten przykład przedstawia elementy z modyfikatorem verticalScroll w kontenerze, który również ma zastosowany modyfikator verticalScroll.

@Composable
private fun AutomaticNestedScroll() {
    val gradient = Brush.verticalGradient(0f to Color.Gray, 1000f to Color.White)
    Box(
        modifier = Modifier
            .background(Color.LightGray)
            .verticalScroll(rememberScrollState())
            .padding(32.dp)
    ) {
        Column {
            repeat(6) {
                Box(
                    modifier = Modifier
                        .height(128.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Text(
                        "Scroll here",
                        modifier = Modifier
                            .border(12.dp, Color.DarkGray)
                            .background(brush = gradient)
                            .padding(24.dp)
                            .height(150.dp)
                    )
                }
            }
        }
    }
}
GesturesSnippets.kt

Korzystanie z modyfikatora nestedScroll

Jeśli chcesz utworzyć zaawansowane przewijanie skoordynowane między wieloma elementami, modyfikator nestedScroll zapewni Ci większą elastyczność dzięki zdefiniowaniu zagnieżdżonej hierarchii przewijania. Jak wspomnieliśmy w poprzedniej sekcji, niektóre komponenty mają wbudowane wsparcie dla przewijania zagnieżdżonego. Jednak w przypadku komponentów, które nie są automatycznie przewijane, takich jak Box lub Column, różnice w przewijaniu takich komponentów nie będą się rozprzestrzeniać w ramach wbudowanego systemu przewijania i nie dotrą do komponentu nadrzędnego NestedScrollConnection. Aby rozwiązać ten problem, możesz użyć nestedScroll, aby zapewnić obsługę innym komponentom, w tym komponentom niestandardowym.

Zagnieżdżony cykl przewijania

Zagnieżdżony cykl przewijania to przepływ wartości delta przewijania, które są wysyłane w górę i w dół drzewa hierarchicznego przez wszystkie komponenty (lub węzły) należące do zagnieżdżonego systemu przewijania, np. za pomocą przewijanych komponentów i modyfikatorów lub za pomocą elementu nestedScroll.

Fazy zagnieżdżonego cyklu przewijania

Gdy element z możliwością przewijania wykryje zdarzenie wyzwalające (np. gest), jeszcze przed wywołaniem faktycznego działania przewijania, wygenerowane różnice są wysyłane do wbudowanego systemu przewijania i przechodzą 3 fazy: przed przewijaniem, wykorzystanie węzła i po przewijaniu.

W pierwszej fazie, czyli przed przewijaniem, komponent, który otrzymał różnice zdarzeń aktywatora, prześle te zdarzenia w górę po drzewie hierarchicznym do najwyższego elementu nadrzędnego. Zdarzenia delta będą się następnie przemieszczać w dół, co oznacza, że będą propagowane od elementu nadrzędnego na poziomie wyższym do elementu podrzędnego, który rozpoczął cykl zwinięcia.

Dzięki temu zagnieżdżone elementy rodzicielskie przewijania (komponenty korzystające z elementów nestedScroll lub modyfikatorów przewijania) mogą wykonać jakąś operację na wartości delta, zanim sam węzeł będzie mógł ją wykorzystać.

W fazie konsumpcji węzła sam węzeł będzie używać różnicy, której nie wykorzystały jego elementy nadrzędne. Wtedy ruch przewijania jest widoczny.

W tym momencie dziecko może wykorzystać całą lub część pozostałego czasu. Pozostałe elementy zostaną przesłane z powrotem, aby przejść przez fazę po przewinięciu.

Wreszcie, w fazie po przewinięciu wszystko, czego nie zużył sam węzeł, zostanie ponownie wysłane do swoich przodków do wykorzystania.

Faza po przewinięciu działa podobnie jak faza przed przewinięciem, w której każdy z elementów nadrzędnych może zdecydować, czy ma zostać wykorzystany.

Podobnie jak w przypadku przewijania, gdy gest przeciągania zostanie zakończony, zamiar użytkownika może zostać przekształcony w szybkość, która służy do przewijania (animacji) przewijalnego kontenera. Rzut jest też częścią gniazdowanego cyklu przewijania, a prędkości generowane przez zdarzenie przeciągania przechodzą przez podobne fazy: przed rzutem, zużycie węzła i po rzucie. Pamiętaj, że animacja gestu przesunięcia jest powiązana tylko z gesturem dotykowym i nie zostanie wywołana przez inne zdarzenia, takie jak a11y czy przewijanie za pomocą sprzętu.

Uczestniczyć w zagnieżdżonym cyklu przewijania

Udział w cyklu oznacza przechwytywanie, wykorzystywanie i raportowanie zużycia delt w hierarchii. Compose udostępnia zestaw narzędzi, które umożliwiają wpływanie na działanie wbudowanego systemu przewijania i bezpośrednie nawiązanie z nim interakcji, np. gdy trzeba coś zrobić z różnicami przewijania, zanim komponent z możliwością przewijania zacznie się przewijać.

Jeśli zagnieżdżony cykl przewijania jest systemem działającym na łańcuchu węzłów, modyfikator nestedScroll umożliwia przechwytywanie i wstawianie tych zmian oraz wpływanie na dane (różnice w przewijaniu), które są propagowane w łańcuchu. Ten modyfikator może być umieszczony w dowolnym miejscu w hierarchii i komunikuje się z zagnieżdżonymi instancjami modyfikatora przewijania w drzewie, aby udostępniać informacje przez ten kanał. Elementy składowe tego modyfikatora to NestedScrollConnection i NestedScrollDispatcher.

NestedScrollConnection pozwala reagować na fazy cyklu przewijania zagnieżdżonego i wpływać na system przewijania zagnieżdżonego. Składa się z 4 metod wywołania, z których każda reprezentuje jedną z faz konsumpcji: przed przewijaniem i po nim oraz przed i po przenoszeniu:

val nestedScrollConnection = object : NestedScrollConnection {
    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        println("Received onPreScroll callback.")
        return Offset.Zero
    }

    override fun onPostScroll(
        consumed: Offset,
        available: Offset,
        source: NestedScrollSource
    ): Offset {
        println("Received onPostScroll callback.")
        return Offset.Zero
    }
}
GesturesSnippets.kt

Każde wywołanie zwrotne zawiera też informacje o przekazywanym delta: available delta dla danego etapu i consumed delta zużyte w poprzednich fazach. Jeśli w dowolnym momencie chcesz zatrzymać propagowanie delt w hierarchii, możesz użyć zagnieżdżonego połączenia przewijania:

val disabledNestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPostScroll(
            consumed: Offset,
            available: Offset,
            source: NestedScrollSource
        ): Offset {
            return if (source == NestedScrollSource.SideEffect) {
                available
            } else {
                Offset.Zero
            }
        }
    }
}
GesturesSnippets.kt

Wszystkie wywołania zwrotne zawierają informacje o typie NestedScrollSource.

NestedScrollDispatcherinicjalizuje zagnieżdżony cykl przewijania. Użycie rozsyłarki i wywołanie jej metody powoduje uruchomienie cyklu. Kontenery, które można przewijać, mają wbudowany moduł rozsyłający, który wysyła do systemu różnice uchwycone podczas wykonywania gestów. Z tego powodu większość przypadków użycia dostosowywania przewijania zagnieżdżonego wymaga użycia NestedScrollConnection zamiast rozsyłacza, aby reagować na istniejące różnice, a nie wysyłać nowych. Więcej informacji znajdziesz w sekcji NestedScrollDispatcherSample.

Zmienianie rozmiaru obrazu podczas przewijania

Gdy użytkownik przewija stronę, możesz tworzyć dynamiczne efekty wizualne, w których obraz zmienia rozmiar w zależności od pozycji przewijania.

Zmienianie rozmiaru obrazu na podstawie pozycji przewijania

Ten fragment kodu demonstruje zmianę rozmiaru obrazu w elementach LazyColumn na podstawie pozycji przewijania pionowego. Obraz zmniejsza się, gdy użytkownik przewija stronę w dół, i powiększa się, gdy przewija w górę, pozostając w określonym zakresie minimalnego i maksymalnego rozmiaru:

@Composable
fun ImageResizeOnScrollExample(
    modifier: Modifier = Modifier,
    maxImageSize: Dp = 300.dp,
    minImageSize: Dp = 100.dp
) {
    var currentImageSize by remember { mutableStateOf(maxImageSize) }
    var imageScale by remember { mutableFloatStateOf(1f) }

    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // Calculate the change in image size based on scroll delta
                val delta = available.y
                val newImageSize = currentImageSize + delta.dp
                val previousImageSize = currentImageSize

                // Constrain the image size within the allowed bounds
                currentImageSize = newImageSize.coerceIn(minImageSize, maxImageSize)
                val consumed = currentImageSize - previousImageSize

                // Calculate the scale for the image
                imageScale = currentImageSize / maxImageSize

                // Return the consumed scroll amount
                return Offset(0f, consumed.value)
            }
        }
    }

    Box(Modifier.nestedScroll(nestedScrollConnection)) {
        LazyColumn(
            Modifier
                .fillMaxWidth()
                .padding(15.dp)
                .offset {
                    IntOffset(0, currentImageSize.roundToPx())
                }
        ) {
            // Placeholder list items
            items(100, key = { it }) {
                Text(
                    text = "Item: $it",
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }

        Image(
            painter = ColorPainter(Color.Red),
            contentDescription = "Red color image",
            Modifier
                .size(maxImageSize)
                .align(Alignment.TopCenter)
                .graphicsLayer {
                    scaleX = imageScale
                    scaleY = imageScale
                    // Center the image vertically as it scales
                    translationY = -(maxImageSize.toPx() - currentImageSize.toPx()) / 2f
                }
        )
    }
}
AnimateImageSnippets.kt

Najważniejsze informacje o kodzie

• Ten kod używa funkcji NestedScrollConnection do przechwytywania zdarzeń przewijania.
• onPreScroll oblicza zmianę rozmiaru obrazu na podstawie przesunięcia osi Y.
• Zmienna stanu currentImageSize przechowuje bieżący rozmiar obrazu, który jest ograniczony do wartości od minImageSize do maxImageSize. imageScale i pochodzi z elementu currentImageSize.
• Odsunięcia LazyColumn na podstawie currentImageSize.
• Funkcja Image używa modyfikatora graphicsLayer, aby zastosować obliczony współczynnik skali.
• Element translationY w elementzie graphicsLayer sprawia, że obraz pozostaje wyśrodkowany w pionowej podczas skalowania.

Wynik

Powyższy fragment kodu powoduje efekt skalowania obrazu podczas przewijania:

Interoperacyjność w przypadku zagnieżdżonego przewijania

Jeśli spróbujesz zagnieżdżać elementy przewijalne View w komponentach przewijalnych lub odwrotnie, możesz napotkać problemy. Najbardziej zauważalne są te, które występują, gdy przewijasz element potomny i docierasz do jego początku lub końca, a oczekujesz, że element nadrzędny przejmie przewijanie. Jednak może się okazać, że nie będzie ono możliwe lub nie będzie działać zgodnie z oczekiwaniami.

Ten problem jest spowodowany oczekiwaniami związanymi z kompozycjami do przewijania. Składany element składany podlega regułom „domyślnego przewijania w ramach elementu złożonego”, co oznacza, że każdy kontener składany musi uczestniczyć w łańcuchu przewijania w ramach elementu złożonego, zarówno jako element nadrzędny za pomocą elementu NestedScrollConnection, jak i jako element podrzędny za pomocą elementu NestedScrollDispatcher. Gdy element podrzędny znajduje się na granicy, powoduje przewijanie elementu nadrzędnego. Na przykład ta reguła umożliwia prawidłowe działanie akcji Compose Pager i Compose LazyRow. Jednak podczas przewijania w celu zapewnienia interoperacyjności za pomocą ViewPager2 lub RecyclerView, ponieważ te nie implementują NestedScrollingParent3, ciągłe przewijanie z elementu podrzędnego do nadrzędnego nie jest możliwe.

Aby włączyć interfejs API do obsługi nawinięcia w obu kierunkach w elementach View i komponentach przewijanych, możesz użyć interfejsu API do obsługi nawinięcia w obu kierunkach, aby rozwiązać te problemy w tych scenariuszach:

Współpracujący rodzic View zawiera dziecko ComposeView

Współpracujący element nadrzędny View to taki, który już implementuje NestedScrollingParent3, a zatem jest w stanie odbierać przesunięcia delty od współpracującego elementu podrzędnego. ComposeView działa w tym przypadku jako usługa podrzędna i musi (pośrednio) wdrożyć usługę NestedScrollingChild3. Przykładem współpracującego rodzica jest androidx.coordinatorlayout.widget.CoordinatorLayout.

Jeśli potrzebujesz możliwości korzystania z przewijania zagnieżdżonego między przewijalnymi kontenerami nadrzędnymi View a zagnieżdżonymi przewijalnymi komponentami podrzędnymi, możesz użyć rememberNestedScrollInteropConnection().

rememberNestedScrollInteropConnection() pozwala i pamięta NestedScrollConnection, która umożliwia współdziałanie zagnieżdżonego przewijania między elementem nadrzędnym View, który implementuje NestedScrollingParent3, a elementem podrzędnym Compose. Należy go używać w połączeniu z modyfikatorem nestedScroll. Ponieważ przewijanie zagnieżchłe jest domyślnie włączone po stronie Compose, możesz użyć tego połączenia, aby włączyć przewijanie zagnieżchłe po stronie View i dodać niezbędną logikę łączącą Views i komponenty.

Często używane są komponenty CoordinatorLayout, CollapsingToolbarLayout i komponent potomny, jak w tym przykładzie:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!--...-->

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
touchinput_gestures_nested_scroll_interop.xml

W aktywności lub fragmencie musisz skonfigurować składankę podrzędną i wymagane komponenty: NestedScrollConnection

open class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findViewById<ComposeView>(R.id.compose_view).apply {
            setContent {
                val nestedScrollInterop = rememberNestedScrollInteropConnection()
                // Add the nested scroll connection to your top level @Composable element
                // using the nestedScroll modifier.
                LazyColumn(modifier = Modifier.nestedScroll(nestedScrollInterop)) {
                    items(20) { item ->
                        Box(
                            modifier = Modifier
                                .padding(16.dp)
                                .height(56.dp)
                                .fillMaxWidth()
                                .background(Color.Gray),
                            contentAlignment = Alignment.Center
                        ) {
                            Text(item.toString())
                        }
                    }
                }
            }
        }
    }
}
GesturesSnippets.kt

Element nadrzędny zawierający element podrzędny AndroidView

Ten scenariusz obejmuje implementację interfejsu API do interoperacyjności w ramach sterowania złożonym w komponencie, gdy masz komponent nadrzędny zawierający komponent podrzędny AndroidView. AndroidView implementuje NestedScrollDispatcher, ponieważ działa jako element podrzędny względem elementu nadrzędnego Compose scrolling, a także NestedScrollingParent3, ponieważ działa jako element nadrzędny względem elementu podrzędnego View scrolling. Element nadrzędny kompozytora będzie mógł otrzymywać zagnieżdżone wartości delta przewijania z zagnieżdżonego elementu podrzędnego, który można przewijać.View

Ten przykład pokazuje, jak w tym scenariuszu uzyskać nawinięcie w ramach nawinięcia:

@Composable
private fun NestedScrollInteropComposeParentWithAndroidChildExample() {
    val toolbarHeightPx = with(LocalDensity.current) { ToolbarHeight.roundToPx().toFloat() }
    val toolbarOffsetHeightPx = remember { mutableStateOf(0f) }

    // Sets up the nested scroll connection between the Box composable parent
    // and the child AndroidView containing the RecyclerView
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // Updates the toolbar offset based on the scroll to enable
                // collapsible behaviour
                val delta = available.y
                val newOffset = toolbarOffsetHeightPx.value + delta
                toolbarOffsetHeightPx.value = newOffset.coerceIn(-toolbarHeightPx, 0f)
                return Offset.Zero
            }
        }
    }

    Box(
        Modifier
            .fillMaxSize()
            .nestedScroll(nestedScrollConnection)
    ) {
        TopAppBar(
            modifier = Modifier
                .height(ToolbarHeight)
                .offset { IntOffset(x = 0, y = toolbarOffsetHeightPx.value.roundToInt()) }
        )

        AndroidView(
            { context ->
                LayoutInflater.from(context)
                    .inflate(R.layout.view_in_compose_nested_scroll_interop, null).apply {
                        with(findViewById<RecyclerView>(R.id.main_list)) {
                            layoutManager = LinearLayoutManager(context, VERTICAL, false)
                            adapter = NestedScrollInteropAdapter()
                        }
                    }.also {
                        // Nested scrolling interop is enabled when
                        // nested scroll is enabled for the root View
                        ViewCompat.setNestedScrollingEnabled(it, true)
                    }
            },
            // ...
        )
    }
}

private class NestedScrollInteropAdapter :
    Adapter<NestedScrollInteropAdapter.NestedScrollInteropViewHolder>() {
    val items = (1..10).map { it.toString() }

    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): NestedScrollInteropViewHolder {
        return NestedScrollInteropViewHolder(
            LayoutInflater.from(parent.context)
                .inflate(R.layout.list_item, parent, false)
        )
    }

    override fun onBindViewHolder(holder: NestedScrollInteropViewHolder, position: Int) {
        // ...
    }

    class NestedScrollInteropViewHolder(view: View) : ViewHolder(view) {
        fun bind(item: String) {
            // ...
        }
    }
    // ...
}

Ten przykład pokazuje, jak używać interfejsu API z modyfikatorem scrollable:

@Composable
fun ViewInComposeNestedScrollInteropExample() {
    Box(
        Modifier
            .fillMaxSize()
            .scrollable(rememberScrollableState {
                // View component deltas should be reflected in Compose
                // components that participate in nested scrolling
                it
            }, Orientation.Vertical)
    ) {
        AndroidView(
            { context ->
                LayoutInflater.from(context)
                    .inflate(android.R.layout.list_item, null)
                    .apply {
                        // Nested scrolling interop is enabled when
                        // nested scroll is enabled for the root View
                        ViewCompat.setNestedScrollingEnabled(this, true)
                    }
            }
        )
    }
}

Na koniec przykład, który pokazuje, jak używać interfejsu API do obsługi interoperacyjności przewijania za pomocą BottomSheetDialogFragment, aby umożliwić przeciąganie i zamykanie:

class BottomSheetFragment : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val rootView: View = inflater.inflate(R.layout.fragment_bottom_sheet, container, false)

        rootView.findViewById<ComposeView>(R.id.compose_view).apply {
            setContent {
                val nestedScrollInterop = rememberNestedScrollInteropConnection()
                LazyColumn(
                    Modifier
                        .nestedScroll(nestedScrollInterop)
                        .fillMaxSize()
                ) {
                    item {
                        Text(text = "Bottom sheet title")
                    }
                    items(10) {
                        Text(
                            text = "List item number $it",
                            modifier = Modifier.fillMaxWidth()
                        )
                    }
                }
            }
            return rootView
        }
    }
}

Pamiętaj, że funkcja rememberNestedScrollInteropConnection() zainstaluje w elemencie, do którego ją dołączysz, komponent NestedScrollConnection. NestedScrollConnection odpowiada za przesyłanie różnic z poziomu Compose na poziom View. Umożliwia to elementowi udział w przewijaniu zagnieżdżonym, ale nie włącza automatycznego przewijania elementów. W przypadku komponentów, które nie są przewijane automatycznie, takich jak Box czy Column, różnice przewijania w takich komponentach nie będą się rozprzestrzeniać w ramach wbudowanego systemu przewijania. Różnice nie będą też docierać do komponentu nadrzędnego View, który jest udostępniany przez komponent rememberNestedScrollInteropConnection().NestedScrollConnection Aby rozwiązać ten problem, upewnij się, że dla tych typów zagnieżdżonych komponentów ustawiono również przewijalne modyfikatory. Więcej informacji znajdziesz w poprzedniej sekcji dotyczącej przewijania zagnieżdżonego.

rodzic, który nie współpracuje View, mający dziecko ComposeView

Widok niewspółpracujący to taki, który nie implementuje niezbędnych interfejsów NestedScrolling po stronie View. Oznacza to, że wbudowana obsługa przewijania zagnieżdżonego w tych elementach Views nie działa. Niewspółpracujące Views to RecyclerView i ViewPager2.

Dodatkowe materiały

• Tworzenie przycisku umożliwiającego przesuwanie z dopasowaniem
• Tworzenie efektu paralaksy