Hi, Everyone Please let me know what`s wrong with ...

# compose

[Asad Mukhtar]

Hi, Everyone Please let me know what`s wrong with this code, Please check the attached video. I have three different textx on all pages.

[Oleksandr Balan]

You should be using an it param in HorizontalPager content lambda instead of referring to the currentPage

HorizontalPager(...) {
   when (it) { ... }
}

Or name it:

HorizontalPager(...) { page ->
   when (page) { ... }
}

But please edit your post and move the code and video to the thread comments.

[Oleksandr Balan]

See https://kotlinlang.slack.com/archives/CJLTWPH7S/p1616265877303000

[Asad Mukhtar]

Code:

HorizontalPager(
    count = 3, state = pagerState,
    modifier = Modifier.fillMaxSize()) {
    when (currentPage) {
        0 -> PageItem(
            "Explore the Earth With Us!",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
                    "eiusmod tempor didunt ut labore et dolor evenaim."
        )
        1 -> PageItem(
            title = "Fast and Easy Booking Process",
            subTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
                    "eiusmod tempor didunt ut labore et dolor evenaim."
        )
        2 -> PageItem(
            title = "Secure Payments and Easy Refunds!",
            subTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
                    "eiusmod tempor didunt ut labore et dolor evenaim."
        )
    }
}

@OptIn(ExperimentalUnitApi::class)
@Composable
fun PageItem(title: String, subTitle: String) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        Text(
            text = title,
            style = semiBoldTextStyle.copy(
                fontSize = TextUnit(20f, TextUnitType.Sp)
            ),
            modifier = Modifier.padding(horizontal = 50.dp),
            textAlign = TextAlign.Center
        )

        Text(
            text = subTitle,
            modifier = Modifier.padding(horizontal = 27.5.dp),
            style = lightTextStyle,
            textAlign = TextAlign.Center
        )
    }
}

[Asad Mukhtar]

@Oleksandr Balan can you please explain this like why i have to use this instead of use pageState.

HorizontalPager(...) { page ->
   when (page) { ... }
}

[Oleksandr Balan]

HorizontalPager uses this lambda to render each of your page and it passes the page number to differentiate between them.

This lambda is called when the page is about to get visible, but instead you are referring to the currentPage (current visible page) to create a content of the requested page.

For example you are on the first page and slides your finger to see the second page, but to render the second screen you are using a property which refers to the current screen (which is the first one).