LazyColumn reference returns the starting position

php editor Baicao today introduces you to a very practical function - LazyColumn reference returns to the starting position. During the development process, we often need to create a vertical scrolling list, and LazyColumn is born for this. It can dynamically generate list items as needed, greatly improving application performance and efficiency. At the same time, LazyColumn can also return the starting position of the list, which facilitates us to operate and process the specified position. Whether you are developing mobile applications or web applications, LazyColumn is a very practical tool, let us take a look at it!

Question content

I have an application. A large image and a lazycolumn at the bottom. When I go to the fourth (or fifth) link and then back, my lazycolumn ends up at the initial position. Link 1 is at the top. When I want link 4 again I have to "twist".

The "Back" button on the "Native" navigation bar is different. When I came back, lazycolumn was already waiting for me in the form I left behind.

What needs to be done in the program to make the top button behave the same as the "back" button on the navigation bar?

This is my file:

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

Screen

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

I tried and searched but found nothing...

Workaround

Try changing your code as follows:

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

When you use navcontroller.navigate(screens.contents.route) you will always create a new backstackentry for that route, and this new destination will be brand new Created without any status. Be careful, you will build a huge back stack with your current approach.

Use navcontroller.navigateup() or navcontroller.popbackstack() and you will get the actual previous destination. See this stackoverflow post for an explanation of the differences.

The above is the detailed content of LazyColumn reference returns the starting position. For more information, please follow other related articles on the PHP Chinese website!