Maison  >  Article  >  La référence LazyColumn renvoie la position de départ

La référence LazyColumn renvoie la position de départ

WBOY
WBOYavant
2024-02-10 09:27:07783parcourir

L'éditeur PHP Baicao vous présente aujourd'hui une fonction très pratique - la référence LazyColumn pour revenir à la position de départ. Pendant le processus de développement, nous avons souvent besoin de créer une liste à défilement vertical, et LazyColumn est né pour cela. Il peut générer dynamiquement des éléments de liste selon les besoins, améliorant considérablement les performances et l'efficacité des applications. Dans le même temps, LazyColumn peut également renvoyer la position de départ de la liste, ce qui nous facilite l'exploitation et le traitement de la position spécifiée. Que vous développiez des applications mobiles ou des applications web, LazyColumn est un outil très pratique, jetons-y un œil !

Contenu de la question

J'ai une candidature. Une grande image et une colonne paresseuse en bas. Lorsque je vais au quatrième (ou cinquième) lien puis reviens, ma colonne paresseuse se retrouve à la position initiale. Le lien 1 est en haut. Quand je veux à nouveau le lien 4, je dois "tordre".

Le bouton "Retour" de la barre de navigation "Native" est différent. Quand je suis revenu, lazycolumn m'attendait déjà sous la forme que j'avais laissée derrière moi.

Que faut-il faire dans le programme pour que le bouton du haut se comporte de la même manière que le bouton « retour » de la barre de navigation ?

Voici mon dossier :

navgraph.kt

@composable
 fun navgraph(navcontroller: navhostcontroller){
     navhost(navcontroller = navcontroller, startdestination = screens.contents.route
     ) {
         addcontentsscreen(navcontroller, this)
         addscreen1(navcontroller, this)
         addscreen2(navcontroller, this)
         addscreen3(navcontroller, this)
         addscreen4(navcontroller, this)
         addscreen5(navcontroller, this)
     }
 }

 private fun addcontentsscreen(
     navcontroller: navhostcontroller,
     navgraphbuilder: navgraphbuilder
 ) {
     navgraphbuilder.composable(route = screens.contents.route) {
         contentsscreen(
             navigatescreen1 = { navcontroller.navigate(screens.screens1.route) },
             navigatescreen2 = { navcontroller.navigate(screens.screens2.route) },
             navigatescreen3 = { navcontroller.navigate(screens.screens3.route) },
             navigatescreen4 = { navcontroller.navigate(screens.screens4.route) },
             navigatescreen5 = { navcontroller.navigate(screens.screens5.route) },
         )
     }
 }

 private fun addscreen1(navcontroller: navhostcontroller, navgraphbuilder: navgraphbuilder) {
     navgraphbuilder.composable(route = screens.screens1.route) {
         screen1 (navigatecontentsscreen = { navcontroller.navigate(screens.contents.route) })
     }
 }

 private fun addscreen2(navcontroller: navhostcontroller, navgraphbuilder: navgraphbuilder) {
     navgraphbuilder.composable(route = screens.screens2.route) {
         screen2 (navigatecontentsscreen = { navcontroller.navigate(screens.contents.route) })
     }
 }

 private fun addscreen3(navcontroller: navhostcontroller, navgraphbuilder: navgraphbuilder) {
     navgraphbuilder.composable(route = screens.screens3.route) {
         screen3 (navigatecontentsscreen = { navcontroller.navigate(screens.contents.route) })
     }
 }

 private fun addscreen4(navcontroller: navhostcontroller, navgraphbuilder: navgraphbuilder) {
     navgraphbuilder.composable(route = screens.screens4.route) {
         screen4 (navigatecontentsscreen = { navcontroller.navigate(screens.contents.route) })
     }
 }

 private fun addscreen5(navcontroller: navhostcontroller, navgraphbuilder: navgraphbuilder) {
     navgraphbuilder.composable(route = screens.screens5.route) {
         screen5 (navigatecontentsscreen = { navcontroller.navigate(screens.contents.route) })
     }
 }

Écran

sealed class screens(val route: string) {
     data object contents : screens("contents_screen")
     data object screens1 : screens("screen_1");
     data object screens2 : screens("screen_2");
     data object screens3 : screens("screen_3")
     data object screens4 : screens("screen_4");
     data object screens5 : screens("screen_5");
 }

screens.kt

class item(val link: () -> unit, val name: string)

 @composable
 fun contentslist(explanation: list<item>) {
     val liststate = rememberlazyliststate()
     lazycolumn(state = liststate) {
         items(explanation.size) { index ->
             val item = explanation[index]
             contentsbutton(
                 onclick = item.link,
                 text = item.name
             )
         }
     }
 }

 @composable
 fun contentsscreen(
     navigatescreen1: () -> unit,
     navigatescreen2: () -> unit,
     navigatescreen3: () -> unit,
     navigatescreen4: () -> unit,
     navigatescreen5: () -> unit,
 ) {
     val listofquestions = listof(
         item( navigatescreen1, "screen1"),
         item( navigatescreen2, "screen2"),
         item( navigatescreen3, "screen3"),
         item( navigatescreen4, "screen4"),
         item( navigatescreen5, "screen5"),
     )
     column {
         image(
             modifier = modifier.height(650.dp),
             painter = painterresource(id = r.drawable.cat),
             contentdescription = null,
             contentscale = contentscale.crop
         )
         contentslist(listofquestions)
     }
 }

screen4.kt

@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun Screen4(
     navigateContentsScreen: () -> Unit,
 ) {
     val text = "Screen4"
     Scaffold(
         containerColor = lightGray,
         contentColor = darkGrey,
         topBar = {
             TopAppBar(
                 modifier = Modifier.height(80.dp),
                 title = {
                     Box(
                         Modifier.fillMaxHeight(),
                         contentAlignment = Alignment.Center
                     ) {
                         Text(
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis,
                             text = text,
                             color = orange,
                         )
                     }
                 },
                 navigationIcon = {
                     Box(
                         Modifier.fillMaxHeight(),
                         contentAlignment = Alignment.Center
                     ) {
                         IconButton(
                             onClick = navigateContentsScreen
                         ) {
                             Icon(
                                 imageVector = Icons.Filled.ArrowBack,
                                 contentDescription = "Back",
                                 tint=orange,
                             )
                         }
                     }
                 },
                 colors = TopAppBarDefaults.mediumTopAppBarColors(
                     containerColor = darkGrey
                 )
             )
         }
     ) { contentPadding ->
         Column(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(contentPadding)
                 .verticalScroll(rememberScrollState()),
         ) {
             Text(
                 text = "Screen4",
                 color = darkGrey,
                 textAlign = TextAlign.Justify,
                 modifier = Modifier.padding(24.dp)
             )
         }
     }
 }

J'ai essayé et cherché mais je n'ai rien trouvé...

Solution de contournement

Essayez de modifier votre code comme suit :

navGraphBuilder.composable(route = Screens.Screens4.route) {
    Screen4 (navigateContentsScreen = { navController.navigateUp() })
}

Lorsque vous utilisez navcontroller.navigate(screens.contents.route) 时,您将始终为该路由创建一个新的 backstackentry et cette nouvelle destination sera fraîchement créée sans aucun état. Attention, vous construirez un énorme back stack avec votre approche actuelle.

En utilisant navcontroller.navigateup()navcontroller.popbackstack(), vous obtiendrez la destination précédente réelle. Voir ce post stackoverflowpour une explication des différences.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer