Editor PHP Baicao hari ini memperkenalkan anda kepada fungsi yang sangat praktikal - rujukan LazyColumn untuk kembali ke kedudukan permulaan. Semasa proses pembangunan, kita sering perlu membuat senarai tatal menegak, dan LazyColumn dilahirkan untuk ini. Ia boleh menjana item senarai secara dinamik mengikut keperluan, meningkatkan prestasi dan kecekapan aplikasi. Pada masa yang sama, LazyColumn juga boleh mengembalikan kedudukan permulaan senarai, yang memudahkan kami mengendalikan dan memproses kedudukan yang ditentukan. Sama ada anda sedang membangunkan aplikasi mudah alih atau aplikasi web, LazyColumn ialah alat yang sangat praktikal, mari kita lihatnya!
Saya ada permohonan. Imej yang besar dan lazycolumn di bahagian bawah. Apabila saya pergi ke pautan keempat (atau kelima) dan kemudian kembali, lazycolumn saya berakhir pada kedudukan awal. Pautan 1 berada di bahagian atas. Bila nak link 4 lagi kena "twist".
Butang "Kembali" pada bar navigasi "Asli" adalah berbeza. Apabila saya kembali, lazycolumn sudah menunggu saya dalam borang yang saya tinggalkan.
Apakah yang perlu dilakukan dalam program untuk menjadikan butang atas berkelakuan sama seperti butang "kembali" pada bar navigasi?
Ini fail saya:
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) }) } }
Skrin
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) } }
skrin4.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) ) } } }
Saya mencuba dan mencari tetapi tidak menemui apa-apa...
Cuba tukar kod anda seperti berikut:
navGraphBuilder.composable(route = Screens.Screens4.route) { Screen4 (navigateContentsScreen = { navController.navigateUp() }) }
Apabila anda menggunakan navcontroller.navigate(screens.contents.route)
时,您将始终为该路由创建一个新的 backstackentry
dan destinasi baharu ini akan diwujudkan baru tanpa sebarang keadaan. Berhati-hati, anda akan membina susunan belakang yang besar dengan pendekatan semasa anda.
Menggunakan navcontroller.navigateup()
或 navcontroller.popbackstack()
anda akan mendapat destinasi sebenar sebelum ini. Lihat siaran stackoverflow ini untuk penjelasan tentang perbezaan.
Atas ialah kandungan terperinci Rujukan LazyColumn mengembalikan kedudukan permulaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!