Reputation: 531
What is the reason the pull-to-refresh indicator appears at the top of the screen when navigating back, instead of sticking to the previous offset position while still refreshing it is coming again from top, is primarily due to how the PullRefreshIndicator and the pullRefresh modifier are implemented in Jetpack Compose.
Note: Carefully watch indicator in the last that is slightly coming from top to it's offset.
@AndroidEntryPoint
class TestActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp()
}
}
}
@Composable
fun MyApp() {
// Define the routes and their respective icons
val topLevelRoutes = listOf(
TopLevelRoute("Profile", "profile", Icons.Filled.AccountCircle),
TopLevelRoute("Friends", "friends", Icons.Filled.People)
)
// Create a NavController
val navController = rememberNavController()
Scaffold(
bottomBar = {
BottomNavigation {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
topLevelRoutes.forEach { topLevelRoute ->
BottomNavigationItem(
icon = { Icon(topLevelRoute.icon, contentDescription = topLevelRoute.name) },
label = { Text(topLevelRoute.name) },
selected = currentDestination?.route == topLevelRoute.route,
onClick = {
navController.navigate(topLevelRoute.route) {
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
}
)
}
}
}
) { innerPadding ->
NavHost(navController, startDestination = "profile", Modifier.padding(innerPadding)) {
composable("profile") { ProfileScreen() }
composable("friends") { FriendsScreen() }
}
}
}
data class TopLevelRoute(val name: String, val route: String, val icon: ImageVector)
@OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
@Composable
fun ProfileScreen() {
var isRefreshing by rememberSaveable { mutableStateOf(false) }
// Create a pull refresh state
val pullRefreshState = rememberPullRefreshState(isRefreshing, onRefresh = {
// Trigger a refresh
isRefreshing = true
},refreshThreshold=180.dp, refreshingOffset = 180.dp)
// Launch an effect when refreshing starts
if (isRefreshing) {
LaunchedEffect(Unit) {
delay(10000) // Simulate a network call
isRefreshing = false // Reset refreshing state
}
}
// Content for the Profile screen
Surface {
Box(
modifier = Modifier
.fillMaxSize()
.pullRefresh(pullRefreshState)) {
Column(
modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
// Your main content here
Text("Profile Screen", style = MaterialTheme.typography.h4)
}
PullRefreshIndicator(
refreshing = isRefreshing,
state = pullRefreshState,
modifier = Modifier.align(Alignment.TopCenter)
)
}
}
}
@Composable
fun FriendsScreen() {
// Content for the Friends screen
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Text("Friends Screen")
}
}
Upvotes: 0
Views: 35