如何让TopAppBar与带内容的Box组件同步滚动

问题描述 #

我正在实现一个Jetpack Compose屏幕，需要让TopAppBar覆盖在作为背景的MyComposable组件上方（TopAppBar在上层）。当前TopAppBar能正确响应滚动配置并隐藏，但背景的MyComposable始终固定在顶部，无法和TopAppBar同步滚动。

默认状态：TopAppBar与MyComposable在屏幕顶部正常显示；
滚动状态：TopAppBar消失，但MyComposable仍固定显示在顶部。

现有代码 #

Scaffold与scrollBehavior配置 #

val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
 
Scaffold(
    modifier = modifier
        .nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopBar(..., scrollBehavior = scrollBehavior)
    }
) { padding ->
    PullToRefreshLazyColumn(...) {
        ... // 常规列表内容
    }
}

TopBar代码 #

@Composable
fun TopBar(
    modifier: Modifier = Modifier,
    context: Context,
    uiState: UiState,
    canNavigateBack: Boolean,
    navigateUp: () -> Unit,
    scrollBehavior: TopAppBarScrollBehavior,
    ...
) {
    Box {
        if (uiState == UiState.Success) {
            MyComposable(
                modifier = modifier,
                context = context,
                ...
            )
        }

        TopAppBar(
            title = { },
            modifier = Modifier,
            colors = TopAppBarDefaults.mediumTopAppBarColors(
                containerColor = Color.Transparent
            ),
            navigationIcon = {
                if (canNavigateBack) {
                    IconButton(
                        onClick = navigateUp,
                        colors = IconButtonColors(
                            contentColor = Color.White,
                            containerColor = Color.Black.copy(0.5f),
                            disabledContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
                            disabledContainerColor = MaterialTheme.colorScheme.secondaryContainer
                        )
                    ) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = null
                        )
                    }
                }
            },
            actions = {
                ...
            },
            scrollBehavior = scrollBehavior
        )
    }
}

MyComposable代码 #

@Composable
fun MyComposable(
    modifier: Modifier = Modifier,
    context: Context,
    ...
) {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = modifier
            .height(300.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.Center),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            if (...) {
                Box(contentAlignment = Alignment.Center) {
                   ... // 图片和按钮组件
            } else if (...) {
                Box(contentAlignment = Alignment.Center) {
                    ... // 图片和按钮组件
            } else {
                ... // 按钮组件
            }

            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = !expanded }
            ) {
                ... // 文本按钮组件
            }
        }

        Column(
            modifier = Modifier
                .align(Alignment.BottomStart)
        ) {
            ... // 文本组件
        }
    }
}

已尝试的无效方案 #

• 在除TopAppBar外的所有组件、仅Box组件、Box+Column组件上添加Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
• 给Column添加verticalScroll修饰符

解决方案 #

问题根源在于MyComposable被放在Scaffold的topBar区域内，而topBar默认是固定布局，不会跟随滚动行为移动。推荐两种解决思路：

思路1：将MyComposable移到列表顶部（推荐） #

把MyComposable作为PullToRefreshLazyColumn的第一个条目，让它跟随列表一起滚动，TopAppBar保持透明覆盖在上方即可。

修改后的Scaffold代码

val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
 
Scaffold(
    modifier = modifier
        .nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopBar(
            context = context,
            uiState = uiState,
            canNavigateBack = canNavigateBack,
            navigateUp = navigateUp,
            scrollBehavior = scrollBehavior
        )
    }
) { padding ->
    PullToRefreshLazyColumn(
        modifier = Modifier.padding(padding),
        contentPadding = PaddingValues(top = 0.dp) // 取消顶部内边距，让MyComposable顶到屏幕顶部
    ) {
        // 将MyComposable作为列表第一个条目
        if (uiState == UiState.Success) {
            item {
                MyComposable(
                    modifier = Modifier.fillMaxWidth(),
                    context = context,
                    ... // 其他参数
                )
            }
        }

        // 原列表内容
        items(...) { item ->
            ...
        }
    }
}

修改后的TopBar代码

移除TopBar内部的MyComposable，只保留TopAppBar：

@Composable
fun TopBar(
    modifier: Modifier = Modifier,
    context: Context,
    uiState: UiState,
    canNavigateBack: Boolean,
    navigateUp: () -> Unit,
    scrollBehavior: TopAppBarScrollBehavior,
    ...
) {
    TopAppBar(
        title = { },
        modifier = modifier,
        colors = TopAppBarDefaults.mediumTopAppBarColors(
            containerColor = Color.Transparent
        ),
        navigationIcon = {
            if (canNavigateBack) {
                IconButton(
                    onClick = navigateUp,
                    colors = IconButtonColors(
                        contentColor = Color.White,
                        containerColor = Color.Black.copy(0.5f),
                        disabledContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
                        disabledContainerColor = MaterialTheme.colorScheme.secondaryContainer
                    )
                ) {
                    Icon(
                        imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                        contentDescription = null
                    )
                }
            }
        },
        actions = {
            ...
        },
        scrollBehavior = scrollBehavior
    )
}

这种方法符合Compose的滚动布局逻辑，无需手动计算偏移，兼容性和可维护性更好。

思路2：利用scrollBehavior偏移量手动控制MyComposable位置 #

如果必须将MyComposable保留在TopBar的Box中，可以通过scrollBehavior.state.offset获取TopAppBar的滚动偏移量，用Modifier.offset让MyComposable同步移动。

修改后的TopBar代码

@Composable
fun TopBar(
    modifier: Modifier = Modifier,
    context: Context,
    uiState: UiState,
    canNavigateBack: Boolean,
    navigateUp: () -> Unit,
    scrollBehavior: TopAppBarScrollBehavior,
    ...
) {
    val offset = scrollBehavior.state.offset // 获取TopAppBar的滚动偏移量（向上滚动时为负数）

    Box {
        if (uiState == UiState.Success) {
            MyComposable(
                modifier = modifier
                    .offset(y = offset), // 跟随TopAppBar的偏移同步移动
                context = context,
                ...
            )
        }

        TopAppBar(
            title = { },
            modifier = Modifier,
            colors = TopAppBarDefaults.mediumTopAppBarColors(
                containerColor = Color.Transparent
            ),
            navigationIcon = {
                if (canNavigateBack) {
                    IconButton(
                        onClick = navigateUp,
                        colors = IconButtonColors(
                            contentColor = Color.White,
                            containerColor = Color.Black.copy(0.5f),
                            disabledContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
                            disabledContainerColor = MaterialTheme.colorScheme.secondaryContainer
                        )
                    ) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = null
                        )
                    }
                }
            },
            actions = {
                ...
            },
            scrollBehavior = scrollBehavior
        )
    }
}

注意：由于MyComposable高度（300dp）远大于TopAppBar高度，可能需要额外调整偏移逻辑（比如限制最大偏移量），避免滚动时MyComposable过度移动。

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