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 dodać efekt skalowania i przewijania, użyj Modifier.transformedHeight, aby umożliwić funkcji Compose obliczenie zmiany wysokości podczas przewijania elementu na ekranie, oraz transformation = SurfaceTransformation(transformationSpec), aby zastosować efekty wizualne, w tym wizualne zmniejszenie elementu w celu dopasowania go do poprzedniego. Użyj niestandardowego komponentu TransformationSpec w przypadku komponentów, które nie przyjmują parametru transformation, np. Text.

Poniższa animacja pokazuje, jak zmienia się rozmiar i przezroczystość elementu podczas przesuwania go po ekranie:

Poniższy fragment kodu pokazuje, jak utworzyć listę za pomocą układu TransformingLazyColumn, aby utworzyć treści, które wyglądają świetnie na różnych rozmiarach ekranów Wear OS. Na przykład w poniższym przykładowym kodzie doda on niezbędne dopełnienie do pierwszego i ostatniego elementu listy, które są ustawione w contentPadding elementu TransformingLazyColumn. Aby wyświetlić wskaźnik przewijania, udostępnij columnState między ScreenScaffold a TransformingLazyColumn:

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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, zalecamy użycie ScalingLazyColumn. Ten efekt pomaga użytkownikom precyzyjniej poruszać się po elementach listy, a także szybciej przewijać długie listy.

Aby dodać ten efekt do wersji ScalingLazyColumn zegarmistrza, ustaw parametr rotaryMode funkcji columnState na wartość RotaryWithSnap, jak pokazano w tym fragmencie kodu:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt