TopAppBar 与 HorizontalPager 的滚动行为出现故障

Question

我有一个

Scaffold

，还有一个

TopAppBar

和一个

HorizontalPager

。我希望当

TopAppBar

中的内容垂直滚动时，

HorizontalPager

折叠起来。

看看我的代码：

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun MainScreen() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Lagging Demonstration") },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->

        val loremIpsum = LoremIpsum(1000)
        val pagerState = rememberPagerState(pageCount = { 3 })

        HorizontalPager(
            modifier = Modifier.padding(innerPadding),
            state = pagerState
        ) { page ->
            Column(
                modifier = Modifier.verticalScroll(rememberScrollState())
            ) {
                Text(
                    text = loremIpsum.values.joinToString(),
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

使用这段代码，我发现

TopAppBar

在向上滚动时奇怪地跳跃：

我的依赖项定义如下：

implementation "androidx.compose.ui:ui:1.6.2'
implementation 'androidx.compose.material3:material3:1.2.0'
implementation 'androidx.activity:activity-compose:1.8.2'

我在 Google 问题跟踪器上发现了 这个问题，他们建议将

nestedScroll(scrollBehavior.nestedScrollConnection)

修饰符应用于

Column

，但这并没有解决我的问题。

有什么解决方法可以解决此行为吗？

---

如果您能够重现该问题，请考虑在 Google 问题跟踪器上投票该问题。

Answer 1

我修改了代码，检查它是否适合你。

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun MainScreen() {
        
// Create a scroll behavior for the TopAppBar
        val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
            rememberTopAppBarState()
        )

        // Create a scroll state for the content
        val scrollState = rememberScrollState()

        // Create a Scaffold with a TopAppBar and a HorizontalPager
        Scaffold(
            // Enable nested scrolling for the Scaffold
            modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
            topBar = {
                // Create a CenterAlignedTopAppBar with the scroll behavior
                CenterAlignedTopAppBar(
                    title = { Text("Lagging Demonstration") },
                    scrollBehavior = scrollBehavior
                )
            },
        ) { innerPadding ->

            // Create a LoremIpsum instance
            val loremIpsum = LoremIpsum(1000)

            // Create a pager state for the HorizontalPager
            val pagerState = rememberPagerState(pageCount = { 3 })

            // Create a HorizontalPager with 3 pages
            HorizontalPager(
                // Add padding to the HorizontalPager
                modifier = Modifier.padding(innerPadding),
                state = pagerState
            ) { page ->
                // Create a Column for each page
                Column(
                    // Enable vertical scrolling for the Column
                    modifier = Modifier
                        .fillMaxWidth()
                        .verticalScroll(scrollState)
                ) {
                    // Display the LoremIpsum text
                    Text(
                        text = loremIpsum.values.joinToString(),
                        modifier = Modifier.fillMaxWidth()
                    )
                }
            }
        }
    }