oleksandrbalan / pagecurl

This library allows to create an effect of turning pages, which can be used in book reader applications, custom on-boarding screens or elsewhere.
Apache License 2.0
345 stars 32 forks source link

Pages are not scrolling properly and fully #33

Closed anilkumarreddyvskub closed 3 months ago

anilkumarreddyvskub commented 3 months ago

Hi I need some help, I am facing an issue, while scrolling content. on every other page either content does not gets scroll completly or scroll does not work. I am pasting code that i am using, can you please check.

`@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter") @OptIn(ExperimentalPageCurlApi::class, ExperimentalMaterial3Api::class) @Composable fun PageCurlScreen(modifier: Modifier = Modifier, onBackClick: () -> Unit) { val state = rememberPageCurlState() val config = rememberPageCurlConfig( onCustomTap = { size, position -> // Detect tap somewhere in the center with 64 radius and show popup if ((position - size.center.toOffset()).getDistance() < 64.dp.toPx()) { true } else { false } } )

val rememberScroll = rememberScrollState()

PageCurl(
    count = stories.size,
    state = state,
    config = config,
) { index ->

    Surface {
        Scaffold(
            // ... your TopAppBarcode ...
        ) { innerPadding ->
            Box(
                modifier = modifier
                    .fillMaxSize()
                    .padding(innerPadding)
            ) {
                Column(
                    modifier = modifier
                        .fillMaxSize() // Allow Column to fill available space
                        .verticalScroll(rememberScroll)
                ) {
                    Text(
                        text = stories[index].title,
                        style = baseline.titleLarge,
                        modifier = Modifier.padding(16.dp) // Add padding around title
                    )

                    Image(
                        painter = stories[index].image,
                        contentDescription = "Image",
                        modifier = Modifier
                            .fillMaxWidth() // Make image take full width
                            .height(200.dp) // Set a fixed height for the image
                    )

                    Text(
                        text = stories[index].story,
                        style = baseline.bodyLarge,
                        textAlign = TextAlign.Justify,
                        modifier = Modifier.padding(16.dp) // Add padding around story text
                    )

                    Text(
                        text = stories[index].story,
                        style = baseline.bodyLarge,
                        textAlign = TextAlign.Justify,
                        modifier = Modifier.padding(16.dp) // Add padding around story text
                    )

                    Text(
                        text = stories[index].story,
                        style = baseline.bodyLarge,
                        textAlign = TextAlign.Justify,
                        modifier = Modifier.padding(16.dp) // Add padding around story text
                    )
                }

                Text(
                    text = index.toString(),
                    color = MaterialTheme.colorScheme.onPrimary,
                    modifier = Modifier
                        .align(Alignment.BottomEnd)
                        .background(
                            color = MaterialTheme.colorScheme.primary,
                            shape = RoundedCornerShape(topStartPercent = 100)
                        )
                        .padding(16.dp)
                )
            }
        }
    }
}

}`

anilkumarreddyvskub commented 3 months ago

Uploaded screen shot on drive, have a look for better understanding 0th and 1st page scrolls fine but 2nd and 3rd page did not scrolled completely https://drive.google.com/file/d/1BA4Q7yJCchnTg0Qjr8dNqk0WDQsO6Wjh/view?usp=sharing

oleksandrbalan commented 3 months ago

Hi 👋

Looks like you are using a shared scroll state for each page and it causes those issues.

I guess you should do something like this:

Instead of one scroll state, create a map with scroll states for each index. This map will be lazy-filled by a new scroll state when user visits a new page. For example like this:

// Prepare a map and use its values in "verticalScroll" modifier
val scrollStates = remember { mutableMapOf<Int, ScrollState>() }

PageCurl(
    count = stories.size,
    state = state,
    config = config,
) { index ->
   ...
    Surface {
        Scaffold(...) { innerPadding ->
            Box(...) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .verticalScroll(scrollStates.getOrPut(index) { ScrollState(0) })
                ) {
                    ...
                }
                ...
            }
        }
    }
}

However due to rendering logic the previous screen is always visible, and thus it intercepts scrolling logic. To stop rendering the previous page when it is not needed you may do the following:

PageCurl(
    count = stories.size,
    state = state,
    config = config,
) { index ->
    // Do not render previous screen when it is not needed
    if (state.current - 1 == index && state.progress == 0f) {
        return@PageCurl
    }

    Surface(...) { ... }
}

With these two fixes it should work correctly now. Maybe later I will handle last issue in the library, but for now simple return should do the trick for you.

anilkumarreddyvskub commented 3 months ago

Yes scrolling works fine now but page curl is getting strucked and not able to see it's animation. Seen delay on tap or drag

oleksandrbalan commented 3 months ago

Hmm 🤔 Could you please try removing the image from the content and see if it still lags?

anilkumarreddyvskub commented 3 months ago

Ya did that but still it lags however, seeing it as random issue