Elenchi con Scrivi per Wear OS

Gli elenchi consentono agli utenti di selezionare un elemento da una serie di opzioni sui dispositivi Wear OS.

Molti dispositivi Wear OS utilizzano schermi rotondi, che rendono più difficile la visualizzazione delle voci dell'elenco nella parte superiore e inferiore dello schermo. Per questo motivo, Compose per Wear OS include una versione della classe LazyColumn chiamata ScalingLazyColumn, che supporta gli effetti di scalabilità e dissolvenza. Quando gli elementi si spostano verso il centro dello schermo, diventano più grandi e più opachi.

La seguente animazione mostra come cambiano le dimensioni e la trasparenza di un elemento nel movimento lungo lo schermo:

Il seguente snippet di codice mostra come creare un elenco contenente testo per ogni elemento:

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
    )
}

Aggiungi un effetto di scorrimento

Puoi aggiungere un comportamento scorrevole ai gesti con le dita che l'utente applica a ScalingLazyColumn oggetti. Questo effetto aiuta gli utenti a navigare in modo più preciso tra gli elementi di un elenco, aiutandoli anche a spostarsi più rapidamente in un elenco lungo.

Per aggiungere questo effetto a un elenco o a un selettore nella tua app, includi il parametro flingBehavior nella definizione di ScalingLazyColumn, come mostrato nel seguente snippet di codice:

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.
}

Per applicare un comportamento immediato a un elemento ScalingLazyColumn quando l'utente interagisce con una manopola rotante, usa RotaryWithSnap, disponibile in Horologist su GitHub.