Listy z funkcją Utwórz na Wear OS

Listy umożliwiają użytkownikom wybieranie pozycji z zestawu opcji na urządzeniach z Wear OS.

Wiele urządzeń z Wear OS ma okrągłe ekrany, co utrudnia wyświetlanie elementów listy znajdujących się u góry i u dołu ekranu. Z tego powodu, Compose na Wear OS zawiera wersję klasy LazyColumn o nazwie TransformingLazyColumn, która obsługuje animacje skalowania i przekształcania. Gdy elementy przesuwają się na krawędzie, stają się mniejsze i znikają.

Aby zastosować zalecane efekty skalowania i przewijania:

  1. Użyj Modifier.transformedHeight, aby umożliwić Compose obliczanie zmiany wysokości podczas przewijania elementu na ekranie.
  2. Użyj transformation = SurfaceTransformation(transformationSpec), aby zastosować efekty wizualne, w tym zmniejszenie zawartości elementu.
  3. Użyj niestandardowego TransformationSpec w przypadku komponentów, które nie przyjmują transformation jako parametru, np. Text.

Poniższa animacja pokazuje, jak element listy skaluje się i zmienia kształt, gdy zbliża się do górnej i dolnej krawędzi ekranu:

Poniższy fragment kodu pokazuje, jak utworzyć listę za pomocą TransformingLazyColumn układu, aby utworzyć treści, które będą dobrze wyglądać na ekranach Wear OS o różnych rozmiarach.

Fragment kodu pokazuje też, jak używać modyfikatora minimumVerticalContentPadding, który należy ustawić w elementach listy, aby zastosować prawidłowe dopełnienie u góry i u dołu listy.

Aby wyświetlić wskaźnik przewijania, udostępnij columnState między ScreenScaffold a TransformingLazyColumn:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

Dodawanie efektu przyciągania i przesuwania

Przyciąganie zapewnia, że gdy użytkownik skończy przewijać lub przesuwać, lista zatrzyma się z elementem umieszczonym dokładnie w określonym punkcie, zwykle na środku ekranu. Na okrągłych ekranach, na których elementy skalują się i przekształcają, gdy oddalają się od środka, przyciąganie jest szczególnie przydatne, ponieważ zapewnia, że najbardziej odpowiedni element pozostaje w pełni widoczny i czytelny w optymalnym obszarze wyświetlania.

Aby dodać efekt przyciągania i przesuwania, ustaw parametr flingBehavior na TransformingLazyColumnDefaults.snapFlingBehavior(columnState). Ustaw rotaryScrollableBehavior, aby pasował do niego, używając RotaryScrollableDefaults.snapBehavior(columnState), aby zapewnić spójne działanie podczas korzystania z fizycznego pokrętła lub ramki.

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState),
        rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(columnState)
    ) {
        // ...
        // ...
    }
}

Układ odwrócony

Domyślnie lista z możliwością przewijania jest zakotwiczona do górnej krawędzi. Jeśli użytkownik przewinie standardową listę do końca i na końcu zostanie dodany nowy element, lista zachowa widok użytkownika na bieżącym elemencie. Jeśli na przykład użytkownik wyświetla element 10 u dołu ekranu i zostanie dodany element 11, widok pozostanie skupiony na elemencie 10, a element 11 pojawi się poza ekranem poniżej bieżącego widoku.

W przypadku takich zastosowań jak aplikacje do przesyłania wiadomości czy dzienniki na żywo takie zachowanie zwykle nie jest pożądane. Gdy pojawiają się nowe elementy, użytkownicy zwykle chcą od razu zobaczyć najnowsze treści, jeśli są już na końcu listy. Jeśli jednocześnie pojawi się wiele elementów, lista powinna przejść do wyświetlania najnowszego elementu u dołu (co oznacza, że niektóre elementy pośrednie mogą nie być w ogóle wyświetlane, chyba że użytkownik przewinie listę w górę).

Aby obsługiwać te przypadki użycia, TransformingLazyColumn umożliwia odwrócenie układu przez ustawienie reverseLayout = true. Spowoduje to zmianę punktu zakotwiczenia listy z górnej krawędzi na dolną.

Dla wygody ustawienie reverseLayout = true odwraca też wizualną kolejność elementów i kierunek gestów przewijania:

  • Elementy są komponowane od dołu do góry, co oznacza, że indeks 0 pojawia się u dołu ekranu.
  • Przewijanie w górę powoduje wyświetlanie elementów o wyższych indeksach.

Aby dodać efekt przyciągania i przesuwania wraz z odwróconym układem, możesz połączyć flingBehavior i rotaryScrollableBehavior, jak pokazano w tym fragmencie kodu:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(scrollState = columnState) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding,
        reverseLayout = true,
        modifier = Modifier.fillMaxWidth()
    ) {
        items(10) { index ->
            Button(
                label = {
                    Text(
                        text = "Item ${index + 1}"
                    )
                },
                onClick = {},
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            )
        }
        item {
            // With reverseLayout = true, the last item declared appears at the top.
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text("Header")
            }
        }
    }
}

Poniższe obrazy pokazują różnicę między zwykłą a odwróconą listą:

TransformingLazyColumn z normalnym układem, w którym na górze znajduje się element 1, a pozostałe elementy są ułożone w kolejności rosnącej.
Rysunek 1. Standardowy układ listy, w którym treści wypełniają obszar od góry do dołu.
Element TransformingLazyColumn z odwróconym układem, w którym element 1 jest u dołu, a elementy są ułożone w kolejności malejącej w kierunku góry.
Rysunek 2. Odwrócony układ listy, w którym treści wypełniają obszar od dołu do góry.

Przyciski na krawędziach list

W Material 3 możesz dodać EdgeButton, czyli przycisk na krawędzi u dołu list. Nie dodawaj go jednak jako elementu w TransformingLazyColumn, ale użyj miejsca edgeButton w ScreenScaffold.

Użycie miejsca edgeButton zapewnia, że przycisk jest prawidłowo umieszczony u dołu ekranu i zachowuje się odpowiednio podczas przewijania listy.

Poniższy fragment kodu pokazuje, jak wdrożyć EdgeButton:

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = columnState,
    edgeButton = {
        EdgeButton(
            onClick = { /* TODO */ },
            modifier = Modifier.scrollable(
                columnState,
                orientation = Orientation.Vertical,
                reverseDirection = true,
                // Apply overscroll to the EdgeButton for proper scrolling behavior.
                overscrollEffect = rememberOverscrollEffect(),
            )
        ) {
            Text("More")
        }
    }
) { contentPadding ->
    TransformingLazyColumn(
        contentPadding = contentPadding,
        state = columnState,
    ) {
        // ...
        // ...
    }
}

SwipeToReveal na listach

Komponent SwipeToReveal umożliwia dostęp do działań dotyczących elementu listy, np. Card lub Chip, przez przesunięcie palcem. Przesunięcie palcem zwykle powoduje wyświetlenie z boku 1 lub 2 przycisków działania (np. „Usuń” lub „Więcej”).

Jeśli używasz SwipeToReveal w TransformingLazyColumn, postępuj zgodnie z tymi wskazówkami:

  • Resetowanie podczas przewijania: gdy użytkownik przewija listę, zresetuj wszystkie elementy otwarte przez przesunięcie palcem do stanu zakrytego.
  • Spójne wysokości: ustaw wysokości przycisków polecenia tak, aby pasowały do wewnętrznego elementu przesuniętego palcem (niezależnie od tego, czy jest to Button czy a Card), aby zapewnić spójny wygląd.
  • Przekształcanie kontenera: zastosuj modyfikator transformedHeight i transformationSpec do komponentu SwipeToReveal samego.
  • Unikanie podwójnego przekształcania: nie stosuj modyfikatorów transformedHeight ani transformation do wewnętrznego elementu przesuniętego palcem (karty lub przycisku w kontenerze SwipeToReveal).