Jetpack Compose 1.4

Par:
fredericmazue

ven, 24/03/2023 - 14:59

Cette version de Jetpack Compose contient de nouvelles fonctionnalités telles que, notamment, Pager et Flow Layouts. Elle améliore également les performances des modificateurs et corrige un certain nombre de bugs.

Compose inclut donc désormais une prise en charge prête à l'emploi pour la pagination verticale et horizontale entre différents contenus. L'utilisation de VerticalPager ou HorizontalPager permet une fonctionnalité similaire à  ViewPager  dans le système d'affichage. Vous n'avez plus besoin de créer un adaptateur ou des fragments ! Vous pouvez simplement intégrer un composable à l'intérieur du  Pager :

// Display 10 items
HorizontalPager(pageCount = 10) { page ->
    // Your specific page content, as a composable:
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}

FlowRow et FlowColumn offrent quant à eux un moyen de disposer des éléments dans un conteneur lorsque la taille des éléments ou du conteneur est inconnue ou dynamique. Ces conteneurs permettent aux éléments de passer à la ligne suivante dans  FlowRow  ou à la colonne suivante dans  FlowColumn  lorsqu'ils manquent d'espace. Ces dispositions de flux permettent également un dimensionnement dynamique à l'aide de poids pour répartir les éléments dans le conteneur.

Voici un exemple qui implémente une liste de filtres pour une application immobilière :

@Composable
fun Filters() {
  val filters = listOf(
    "Washer/Dryer", "Ramp access", "Garden", "Cats OK", "Dogs OK", "Smoke-free"
  )
  FlowRow(
    horizontalArrangement = Arrangement.spacedBy(8.dp)
  ) {
    filters.forEach { title ->
      var selected by remember { mutableStateOf(false) }
      val leadingIcon: @Composable () -> Unit = { Icon(Icons.Default.Check, null) }
      FilterChip(
        selected,
        onClick = { selected = !selected },
        label = { Text(title) },
        leadingIcon = if (selected) leadingIcon else null
      )
    }
  }
}