Jetpack Compose中LargeTopAppBar内容不可滚动时仍可折叠的问题

问题描述 #

实现包含LargeTopAppBar和LazyColumn的界面时遇到异常：即使LazyColumn内容不足以滚动，拖动内容区域仍能触发TopAppBar折叠。期望实现安卓设置界面的同款逻辑：仅当内容足够滚动时TopAppBar才可折叠，且拖动TopAppBar区域不会触发滚动。

错误尝试分析 #

此前通过firstVisibleItemIndex和firstVisibleItemScrollOffset判断可滚动状态的逻辑过于严格，导致即使内容足够滚动，TopAppBar也无法正常折叠。正确逻辑应基于内容总高度是否超过可见区域来判断。

解决方案 #

通过三步实现需求：

1. 监听LazyColumn的可滚动状态

利用LazyListState的布局信息，判断内容是否超出可见区域：

val lazyListState = rememberLazyListState()
val isContentScrollable = remember {
    derivedStateOf {
        val layoutInfo = lazyListState.layoutInfo
        // 内容总高度大于可见区域高度时判定为可滚动
        layoutInfo.totalItemsCount > 0 && 
        layoutInfo.viewportEndOffset < layoutInfo.totalItemsSize
    }
}

2. 配置ScrollBehavior的滚动权限

将canScroll参数绑定到可滚动状态，同时结合滚动位置优化体验：

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
    canScroll = {
        // 内容可滚动，或当前不在顶部（允许继续折叠），或不在底部（允许继续展开）
        isContentScrollable.value ||
        lazyListState.firstVisibleItemIndex > 0 ||
        lazyListState.firstVisibleItemScrollOffset > 0 ||
        lazyListState.layoutInfo.viewportEndOffset < lazyListState.layoutInfo.totalItemsSize
    }
)

3. 拦截TopAppBar的触摸事件

给LargeTopAppBar添加触摸拦截，阻止拖动TopAppBar时触发滚动：

@Composable
fun HomeTopAppBar(
    scrollBehavior: TopAppBarScrollBehavior,
    actionOnClick: () -> Unit
) {
    LargeTopAppBar(
        modifier = Modifier
            .pointerInput(Unit) {
                // 拦截所有触摸事件，不传递给嵌套滚动系统
                awaitPointerEventScope {
                    while (true) {
                        awaitPointerEvent()
                    }
                }
            },
        title = { /* Title Composable */ },
        actions = { /* Some Action Button Composable */ },
        scrollBehavior = scrollBehavior
    )
}

完整代码示例

@Composable
fun HomeScreen(actionOnClick: () -> Unit) {
    val lazyListState = rememberLazyListState()
    val isContentScrollable = remember {
        derivedStateOf {
            val layoutInfo = lazyListState.layoutInfo
            layoutInfo.totalItemsCount > 0 && 
            layoutInfo.viewportEndOffset < layoutInfo.totalItemsSize
        }
    }

    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
        canScroll = {
            isContentScrollable.value ||
            lazyListState.firstVisibleItemIndex > 0 ||
            lazyListState.firstVisibleItemScrollOffset > 0 ||
            lazyListState.layoutInfo.viewportEndOffset < lazyListState.layoutInfo.totalItemsSize
        }
    )

    Scaffold(
        modifier = Modifier
            .fillMaxSize()
            .nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = { HomeTopAppBar(scrollBehavior, actionOnClick) },
    ) { innerPadding ->
        LazyColumn(
            state = lazyListState,
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize()
        ) {
            items(someIterable) {
                // 自定义列表项Composable
            }
        }
    }
}

@Composable
fun HomeTopAppBar(
    scrollBehavior: TopAppBarScrollBehavior,
    actionOnClick: () -> Unit
) {
    LargeTopAppBar(
        modifier = Modifier
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        awaitPointerEvent()
                    }
                }
            },
        title = { Text("首页") },
        actions = {
            IconButton(onClick = actionOnClick) {
                Icon(Icons.Default.Settings, contentDescription = "设置")
            }
        },
        scrollBehavior = scrollBehavior
    )
}

效果说明 #

• 内容不足时：拖动内容区域或TopAppBar都不会触发TopAppBar折叠
• 内容足够时：拖动内容区域可正常折叠/展开TopAppBar，拖动TopAppBar区域无响应

内容的提问来源于stack exchange，提问作者ChungJungSoo