Listy z funkcją Utwórz na Wear OS

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

Wiele urządzeń z Wear OS ma okrągłe ekrany, przez co trudniej jest zobaczyć pozycje znajdujące się u góry i u dołu ekranu. Dlatego funkcja tworzenia w Wear OS zawiera wersję klasy LazyColumn o nazwie ScalingLazyColumn, która obsługuje efekty skalowania i zanikania. Gdy elementy zbliżają się do środka ekranu, stają się większe i bardziej przezroczyste.

Animacja poniżej pokazuje, jak rozmiar i przezroczystość elementu zmieniają się podczas przesuwania się po ekranie:

Poniższy fragment kodu pokazuje, jak utworzyć listę zawierającą tekst poszczególnych elementów:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

Dodaj efekt przyciągania i rzucania

Możesz dodać przyciąganie i przerzucanie gestami palcami, które użytkownik stosuje do obiektów w ScalingLazyColumn. Ten efekt pomaga użytkownikom dokładniej poruszać się po elementach na liście, a jednocześnie szybciej poruszać się po długiej liście.

Aby dodać ten efekt do listy lub selektora w aplikacji, umieść parametr flingBehavior w definicji funkcji ScalingLazyColumn, jak w tym fragmencie kodu:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

Aby zastosować podobne przyciąganie i przerzucanie do elementu ScalingLazyColumn, gdy użytkownik wchodzi w interakcję z pokrętłem, użyj funkcji RotaryWithSnap dostępnej w aplikacji Horologist na GitHubie.