• Créez une nouvelle activity "Empty Activity" (en compose cette fois) appelez la ComposeActivity
• L'IDE devrait automatiquement compléter app/build.gradle.kts pour configurer Compose (buildFeatures, dependencies, etc) et l'ajouter au AndroidManifest.xml
• Adaptez votre AndroidManifest pour en faire notre activity principale à la place de l'ancienne, et relancez l'app pour vérifier: il faut déplacer ... de l'ancienne activity à la nouvelle
• Renommez Greeting en ListScreen et GreetingPreview en ListPreview et supprimez l'argument name

Vous devriez avoir quelque chose comme ça:

class ComposeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //...
        setContent {
            TodoTheme {
                ListScreen()
            }
        }
    }
}

• Personnalisez un peu votre Theme en fonction de votre projet perso !

• affichez une liste d'éléments avec Compose (utilisez LazyColumn et items), avec des éléments, c'est légerement plus simple qu'une RecyclerView 🙃 :

LazyColumn{
    items(100) {
        Text(text = "Item #$it")
    }
}

• Lancez l'app et essayez de scroller la liste: attention, on ne voit pas les contours de la liste, mais elle ne prends pas toute la largeur actuellement donc le scroll ne marche que si on scroll précisément sur les textes !
• Pour régler ça, ajoutez un Modifier.fillMaxWidth() à la LazyColumn
• Ajoutez un Modifier.padding(16.dp) à la LazyColumn pour ajouter un peu d'espace autour
• Essayez à nouveau de scroller, vous devriez pouvoir le faire aussi en dehors des textes maintenant
• Espacez un peu les éléments de la liste en lui passant verticalArrangement = Arrangement.spacedBy(8.dp) comme argument
• Personnalisez un peu l'affichage comme vous le souhaitez (couleurs, taille de texte, ...)

On va maintenant ajouter un peu d'interactivité sur notre liste.

• Ajoutez une variable items en haut de ListScreen:

var items by remember { mutableStateOf(List(100) { "Item #$it" }) }

• faites les imports suggérés par l'IDE

• Modifiez la liste pour qu'elle utilise cette variable items au lieu de la liste statique: attention il faudrait importer une autre fonction items qui prend directement une List au lieu d'un Int (l'IDE devrait vous proposer l'import automatiquement mais parfois il confond les 2)
• lancez l'app: ça devrait fonctionner pareil
• Remplacez vos items en String par des data class Task et ajoutez la description:

items(items) { task ->
  Column {
    Text(text = task.title)
    Text(text = task.description)
  }
}

• lancez l'app pour vérifier que tout s'affiche correctement

On va utiliser des éléments de "Material Design 3" pour améliorer un peu l'interface facilement.

• Modifiez ListScreen pour qu'elle utilise un Scaffold, avec une TopAppBar (acceptez de "Opt-in à ExperimentalMaterial3Api") avec le titre de votre choix
• et un FloatingActionButton avec une icône "Add"
• passez le innerPadding du Scaffold à la LazyColumn pour que le contenu ne soit pas caché par la TopAppBar

Scaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = { TopAppBar(title = { Text(/* title */) }) },
    floatingActionButton = {
        FloatingActionButton(onClick = { /* TODO */ }) {
          Icon(imageVector = Icons.Default.Add, contentDescription = "Add")
        }
    }
) {
    LazyColumn() {
        // ...
    }
}

• Lancez l'app pour vérifier que tout s'affiche correctement

On va maintenant implémenter l'ajout d'éléments à la liste.

• Implémentez le clic sur le FloatingActionButton pour ajouter un nouvel élément à la liste comme précédemment mais en Compose:

onClick = {
    val newItem = Task(title = "Item #${items.size}")
    items = items + newItem
}

• Lancez l'app et testez l'ajout d'éléments: vous devriez voir la liste se mettre à jour automatiquement mais il faut scroller jusqu'en bas pour voir le nouvel élément
• Pour améliorer ça, utilisez le LazyListState pour scroller automatiquement jusqu'en bas:
• Ajoutez un val listState = rememberLazyListState() en haut de ListScreen
• Passez le listState à la LazyColumn avec state = listState
• Modifiez le onClick du FloatingActionButton pour scroller jusqu'en bas après avoir ajouté l'élément avec listState.animateScrollToItem(items.size - 1)

• Ajoutez un val coroutineScope = rememberCoroutineScope() en haut de ListScreen

coroutineScope.launch {
  // suspend function
}

• Lancez l'app et testez à nouveau l'ajout d'éléments: cette fois la liste devrait scroller automatiquement jusqu'au nouvel élément ajouté

Ajoutez un bouton de suppression dans chaque élément et faites sorte qu'il fonctionne Pour avoir un item avec le texte à gauche et le bouton tout à droite vous pouvez utiliser une Row avec horizontalArrangement = Arrangement.SpaceBetween ou bien un Spacer(modifier = Modifier.weight(1f)) entre les 2 éléments.

On va d'abord permettre de naviguer vers notre ancienne MainActivity:

• Ajoutez une flèche dans les actions de la top bar:

IconButton(onClick = {...}) {
  Icon(
      imageVector = Icons.AutoMirrored.Filled.ArrowForward,
      contentDescription = "go to classic app"
  )
}

• Implémentez le clic pour naviguer vers l'ancienne MainActivity:

val intent = Intent(context, MainActivity::class.java)
context.startActivity(intent)

Pour récupérer un Context on utilise un CompositionLocal:

val context = LocalContext.current

• Lancez l'app et testez la navigation vers l'ancienne activity

Maintenant on va utiliser la bibliothèque Navigation3 pour gérer la navigation de manière plus propre:

• renseignez vous sur la doc officielle
• Ajoutez les dépendances nécessaires dans app/build.gradle.kts: doc
• Créez un nouveau fichier DetailScreen.kt avec une fonction @Composable DetailScreen(task: Task) qui affiche les détails d'une tâche
• Utilisez l'IDE pour extraire ListScreen dans un autre fichier également
• Dans ComposeActivity, au lieu d'afficher directement ListScreen, créez et utilisez un composant App():
• Gardez le Scaffold dans ListScreen sans la topBar: déplacez là dans un autre Scaffold que vous ajouterez dans App() pour qu'elle soit commune à tous les écrans
• Modifiez ListScreen pour qu'au clic sur un élément, on navigue vers DetailNavScreen

@Serializable
data object ListNavScreen : NavKey
@Serializable
data class DetailNavScreen(val task: Task) : NavKey

@Composable
fun App() {
    // on créé notre historique de navigation avec la liste comme écran initial
    val backStack = rememberNavBackStack(ListNavScreen)

    NavDisplay(
      backStack = backStack,
      entryProvider = entryProvider {
        entry<ListNavScreen> { ListScreen(onClickItem = {...}) }
        entry<DetailNavScreen> { key -> DetailScreen(task = key.task) }
      }
    )
}

• Extraire un composant TaskItem pour la partie qui affiche chaque item et faire en sorte qu'au clic sur un item, on remonte un event onClick qui permettra de naviguer vers l'écran détail:

@Composable
private fun TaskItem(
    modifier: Modifier = Modifier,
    item: Task,
    onClick: (Task) -> Unit,
    onDelete: () -> Unit,
) {...}

• Dans App(), faites en sorte que ce clic navigue bien:

// Pour naviguer vers l'écran détail, on l'ajoute à l'historique:
backStack.add(DetailNavScreen(...))

• Ajoutez un bouton "OK" dans DetailScreen qui permet de revenir en arrière:

// Pour revenir en arrière, on enlève le dernier écran de l'historique:
backStack.removeLastOrNull()