0

Estoy usando un HorizontalPager de Google Accompanist en mi aplicación para poder hacer swipe con el dedo para ir pasando de tabs.

Funciona muy bien, sino fuera porque cada tab esta replicando la misma información del otro. Cada tab contiene un fragment que es un mismo componente con una misma llamada a una API en la que solo cambia un parámetro.

Son 3 tabs, el que cargo inicial es el número 1, es decir el central, y lo carga bien, pero en el momento que cambio al 0 o al 2, la información se replica en todos ellos mostrando lo mismo.

@OptIn(ExperimentalFoundationApi::class, ExperimentalPagerApi::class)
@Composable
fun Tabs(zodiacName: String?, modifier: Modifier = Modifier, pagerState: PagerState) {
    val viewModel = getViewModel<DetailViewModel>()
    val tabTitles = listOf("Yesterday", "Today", "Tomorrow")
    val coroutineScope = rememberCoroutineScope()
    Column(
        modifier
    ) {
        TabRow(
            modifier = Modifier.fillMaxWidth(),
            selectedTabIndex = pagerState.currentPage,
            backgroundColor = Color.Transparent,
            indicator = { tabPositions ->
                TabRowDefaults.Indicator(
                    color = Color.White,
                    modifier = Modifier.pagerTabIndicatorOffset(
                        pagerState,
                        tabPositions
                    ),
                    height = 2.dp
                )
            }) {
            tabTitles.forEachIndexed { index, title ->
                Tab(selected = pagerState.currentPage == index,
                    onClick = {
                         coroutineScope.launch {
                             pagerState.animateScrollToPage(index)
                         }
                    },
                    text = {
                        Text(
                            text = title,
                            color = Color.White,
                            fontSize = 14.sp,
                            fontFamily = Helvetica
                        )
                    })
            }
        }
        HorizontalPager(count = tabTitles.size, state = pagerState) { page ->
            when (page) {
                0 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "yesterday"
                )
                1 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "today"
                )
                2 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "tomorrow"
                )
            }
        }
    }
}

Y este sería el contenido del componente para la vista en la que solo cambia el campo de la llamada que le paso a través de un parámetro:

@Composable
fun Prediction(viewModel: DetailViewModel, zodiacName: String?, day: String?) {
    val errorMessage = viewModel.errorMessage.value
    val horoscope = viewModel.horoscopeResponse.value
    if (errorMessage.isEmpty()) {
        LazyColumn(
            modifier = Modifier
                .padding(top = 20.dp, bottom = 10.dp, start = 10.dp, end = 10.dp)
        ) {
            item {
                LaunchedEffect(Unit) {
                    viewModel.getHoroscopeDetail(zodiacName, day)
                }
                if (horoscope.checkDescriptionContent()) {
                    PredictionCard(horoscope = horoscope)

                } else {
                    ShimmerCard()
                }
            }
        }

    } else {
        ErrorComponent(
            viewModel = viewModel,
            sign = zodiacName,
            day = day
        )
    }
}

He intentado creando un componente diferente para cada tab, pero no lo ha solucionado. Me gustaría saber porque se está replicando la información en todos y de que forma hacer que cada tab muestre la información que le corresponde.

1 respuesta 1

0

Me voy a responder a mi mismo, el problema es que estaba cogiendo la página que me devuelve el HorizontalPager en vez de la del PagerState. La solución sería:

HorizontalPager(count = tabTitles.size, state = pagerState) {
            when (pagerState.currentPage) {
                0 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "yesterday"
                )
                1 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "today"
                )
                2 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "tomorrow"
                )
            }
        }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.