Jetpack Compose：实现可滚动Collapsing Toolbar及无缝滚动求助

问题1：Toolbar无法触发滚动的修复 #

• 不能直接给Toolbar添加verticalScroll，会与CollapsingToolbarScaffold的内部滚动机制冲突导致崩溃。正确做法是给Toolbar根容器绑定scaffold的滚动连接，让滑动事件能传递到滚动系统。
• 移除.pin()修饰符（若不需要固定Toolbar整体内容），该修饰符会让元素固定不动，阻断滚动触发逻辑；若需固定局部元素（如标题），可单独给目标元素添加.pin()。

问题2：内容覆盖Toolbar的修复 #

• 必须使用CollapsingToolbarScaffold content lambda提供的paddingValues给内容区域设置padding，确保内容不会被Toolbar遮挡。
• 让内容区域的滚动组件（如LazyColumn）与scaffold的滚动状态联动，添加相同的nestedScroll连接，实现无缝滚动效果。
• 状态栏无缝融合需在Activity中关闭系统自动适配，再给scaffold添加状态栏padding，让Toolbar背景延伸到状态栏下方。

修改后的完整代码 #

第一步：Activity中配置状态栏融合

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 关闭系统自动适配，让Composable内容延伸到状态栏区域
    WindowCompat.setDecorFitsSystemWindows(window, false)
    setContent {
        YourAppTheme {
            ContactCollapsingToolbar(onContactsCardClick = { /* 处理点击逻辑 */ })
        }
    }
}

第二步：修改CollapsingToolbar实现

@Composable
fun ContactCollapsingToolbar(
    onContactsCardClick: (Int) -> Unit
) {
    val collapsingToolbarState = rememberCollapsingToolbarScaffoldState()

    CollapsingToolbarScaffold(
        modifier = Modifier
            .fillMaxSize()
            .statusBarsPadding(), // 让Toolbar内容避开状态栏图标，背景延伸到状态栏
        state = collapsingToolbarState,
        scrollStrategy = ScrollStrategy.EnterAlwaysCollapsed,
        toolbar = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
                    .nestedScroll(collapsingToolbarState.nestedScrollConnection) // 绑定滚动连接，解决Toolbar滑动无响应
                    .background(
                        brush = Brush.linearGradient(
                            colors = listOf(
                                MaterialTheme.colors.primary,
                                White
                            )
                        )
                    )
            ) {
                Image(
                    painter = painterResource(id = R.drawable.fc4_self_massage),
                    contentDescription = null,
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize()
                        .clip(RoundedCornerShape(bottomEnd = 45.dp))
                )

                // 若需标题固定，可给此Text添加.pin()
                Text(
                    text = stringResource(id = R.string.contact_categories),
                    style = TextStyle(color = MaterialTheme.colors.onPrimary) + MaterialTheme.typography.h1,
                    modifier = Modifier.padding(16.dp),
                    textAlign = TextAlign.Start
                )
            }
        }
    ) { paddingValues ->
        // 使用scaffold提供的padding，避免内容覆盖Toolbar
        ContactsContentScreen(
            onContactsCardClick = onContactsCardClick,
            modifier = Modifier.padding(paddingValues),
            scrollConnection = collapsingToolbarState.nestedScrollConnection
        )
    }
}

// 修改内容页，确保滚动组件与Toolbar联动
@Composable
fun ContactsContentScreen(
    onContactsCardClick: (Int) -> Unit,
    modifier: Modifier = Modifier,
    scrollConnection: NestedScrollConnection
) {
    LazyColumn(
        modifier = modifier
            .fillMaxSize()
            .nestedScroll(scrollConnection), // 绑定滚动连接，实现无缝滚动联动
        contentPadding = PaddingValues(vertical = 8.dp)
    ) {
        // 示例列表项，替换为你的实际内容
        items(20) { index ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
                    .clickable { onContactsCardClick(index) },
                elevation = 4.dp
            ) {
                Text(text = "Contact Item $index", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

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