Listy z funkcją Utwórz na Wear OS

Listy umożliwiają użytkownikom wybieranie elementów 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, zmniejszają się i znikają.

Aby zastosować zalecane efekty skalowania i przewijania:

  1. Użyj Modifier.transformedHeight, aby funkcja Compose mogła obliczyć zmianę wysokości podczas przewijania elementu na ekranie.
  2. Użyj transformation = SurfaceTransformation(transformationSpec), aby zastosować efekty wizualne, w tym zmniejszyć zawartość 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 zmienia rozmiar i kształt, gdy zbliża się do górnej i dolnej krawędzi ekranu:

Poniższy fragment kodu pokazuje, jak utworzyć listę za pomocą układu TransformingLazyColumn, aby utworzyć treści, które świetnie wyglądają na różnych rozmiarach ekranu Wear OS.

Fragment kodu pokazuje też użycie modyfikatora minimumVerticalContentPadding, który należy ustawić w elementach listy, aby zastosować odpowiedni odstęp u góry i u dołu listy.

Aby wyświetlić wskaźnik przewijania, podziel 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,
                )
            }
        }
    }
}
List.kt

Dodawanie efektu przyciągania i przesuwania

Jeśli chcesz dodać zachowanie przyciągania i przesuwania, ustaw parametr flingBehavior na TransformingLazyColumnDefaults.snapFlingBehavior(columnState), jak pokazano w tym fragmencie kodu: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt