Listy z funkcją Utwórz na Wear OS

Listy umożliwiają użytkownikom wybór elementu 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 u góry i dołu ekranu. Dlatego Compose dla 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 dodać efekt skalowania i przewijania, użyj opcji Modifier.transformedHeight, aby umożliwić Compose obliczenie zmiany wysokości podczas przewijania elementu na ekranie, oraz opcji transformation = SurfaceTransformation(transformationSpec), aby zastosować efekty wizualne, w tym zmniejszyć rozmiar elementu, tak aby pasował do poprzedniego.

Animacja poniżej pokazuje, jak zmienia się rozmiar i przezroczystość elementu podczas jego przemieszczania po ekranie:

Poniższy fragment kodu pokazuje, jak utworzyć listę za pomocą układu TransformingLazyColumn, aby stworzyć treści, które świetnie wyglądają na różnych rozmiarach ekranów Wear OS. Na przykład w tym przykładowym kodzie doda on odpowiednie wypełnienie do pierwszego i ostatniego elementu listy, które są ustawione w contentPadding elementu TransformingLazyColumn. Aby wyświetlić wskaźnik przewijania, podziel 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 wyrzucania

Jeśli chcesz dodać zachowanie snap-and-fling, zalecamy użycie ScalingLazyColumn. Dzięki temu użytkownicy mogą precyzyjniej poruszać się po elementach na liście, a także szybciej przewijać długą listę.

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

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