kotlin 滑动时伴奏HorizontalViewPager在过渡中延迟

myss37ts  于 2022-11-16  发布在  Kotlin
关注(0)|答案(1)|浏览(166)

我正在使用来自伴奏库的HorizontalViewPager,我注意到的一件事是滑动时页面转换的延迟。
由于某种原因,只有当你滑动到下一页的一半以上时,页面才会真正改变文本。如果你滑动到下一页的一半以下,文本就会恢复到原来的状态。我希望用户能立即看到正确的文本状态,而不是滑动到一半以上才能看到变化。
可组合:

@Composable
fun TutorialPage(page: TutorialPage) {
    Column {
        Spacer(
            modifier = Modifier.height(16.dp)
        )

        Column(
            modifier = Modifier
                .weight(1f)
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {

        }

        Spacer(
            modifier = Modifier.height(16.dp)
        )

        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Bottom,
        ) {
            Column(
                modifier = Modifier
                    .padding(start = 32.dp, end = 32.dp)
            ) {
                Text(
                    page.title,
                    style = MaterialTheme.typography.displayMedium,
                    textAlign = TextAlign.Center,
                    fontFamily = FontFamily(
                        Font(R.font.manrope_medium)
                    )
                )

                Spacer(
                    modifier = Modifier.height(8.dp)
                )

                Text(
                    page.description,
                    style = MaterialTheme.typography.titleMedium,
                    textAlign = TextAlign.Center,
                    fontFamily = FontFamily(
                        Font(R.font.manrope_medium)
                    ),
                    modifier = Modifier.alpha(0.7f)
                )
            }

            Spacer(
                modifier = Modifier.height(32.dp)
            )

            Row(
                modifier = Modifier.padding(16.dp)
            ) {

            }
        }
    }
}
@OptIn(ExperimentalPagerApi::class)
@Composable
fun TutorialScreen(
    viewModel: TutorialScreenViewModel,
    state: TutorialScreenState
) {
    val pagerState = rememberPagerState()

    Column {
        Column(
            modifier = Modifier.weight(1f)
        ) {
            HorizontalPager(
                count = state.tutorial.pages.size,
                state = pagerState
            ) {
                TutorialPage(state.tutorial.pages[pagerState.currentPage])
            }
        }

        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {
            repeat(state.tutorial.pages.size) {
                Box(
                    modifier = Modifier
                        .clip(CircleShape)
                        .size(10.dp)
                        .background(if (it == pagerState.currentPage) Color.Gray else Color.LightGray)
                ) {

                }
                Spacer(
                    modifier = Modifier.width(8.dp)
                )
            }
        }
    }
}

查看型号:

@HiltViewModel
class TutorialScreenViewModel @Inject constructor() : ViewModel() {

    private val _state = mutableStateOf(
        TutorialScreenState(tutorial)
    )

    val state: State<TutorialScreenState>
        get() = _state

    private val tutorial: Tutorial
        get() =
            Tutorial.Builder()
                .addPage(
                    TutorialPage(
                        title = "Creating a project",
                        description = "Creating a project is easy! To do so, simply tap the squircle-shaped plus button at the bottom right of your home screen.",
                        image = R.drawable.tutorial_img_1
                    )
                )
                .addPage(
                    TutorialPage(
                        title = "Setting up a project",
                        description = "From then, you will see a screen in which you can input your project's name, width, and height. Confused where to start? Feel free to use some of PixaPencil's ready made quick presets or add your own for future use.",
                        image = R.drawable.tutorial_img_2
                    )
                )
                .addPage(
                    TutorialPage(
                        title = "Let's draw",
                        description = "Now, you should be navigated to your drawing screen. The screen is divided into three main sections: your current color palette, your drawing view, and your tabs.",
                        image = 0
                    )
                )
                .addPage(
                    TutorialPage(
                        title = "Tools",
                        description = "PixaPencil has a wide variety of tools to get you started, such as: pencil tool, line tool, paint bucket tool, rectangle tool, square tool, ellipse tool, circle tool, and more.",
                        image = 0
                    )
                )
                .addPage(
                    TutorialPage(
                        title = "Features",
                        description = "As well as tools, PixaPencil has a wide variety of features get you started, such as: color palette functionality, replace color, import Lospec palette, pixel perfect mode, canvas filters, brushes, and more.",
                        image = 0
                    )
                )
                .addPage(
                    TutorialPage(
                        title = "Free and open source",
                        description = "PixaPencil is 100% free (as in freedom) and open source, the code is available on GitHub for anyone to view, download, or extend. We are always open for contributors to the project.",
                        image = 0
                    )
                )
                .addPage(
                    TutorialPage(
                        title = "Join the community",
                        description = "PixaPencil has a vibrant community on Discord, which you can join here.",
                        image = 0
                    )
                )
                .build()
}

教程:

class Tutorial private constructor(val pages: MutableList<TutorialPage>) {

    class Builder {
        private val pages: MutableList<TutorialPage> = mutableListOf()

        fun addPage(page: TutorialPage): Builder {
            pages.add(page)
            return this
        }

        fun build(): Tutorial {
            return Tutorial(pages)
        }
    }
}

页码:

data class TutorialPage(
    val title: String,
    val description: String,
)

我试着在网上(文档)寻找解决方案,但我没有找到任何解决方案,也没有找到有人与伴奏库有同样的问题。

lmyy7pcs

lmyy7pcs1#

不要使用TutorialPage(state.tutorial.pages[pagerState.currentPage]),而要使用TutorialPage(state.tutorial.pages[it]),其中“it”是pager在lambda中提供的构建器索引。希望它能有所帮助:d

相关问题