LargeTopAppBar的ScrollBehavior不生效，滚动时无法折叠

我已为LargeTopAppBar组件添加了自定义ScrollBehavior，但向上滚动屏幕内容时，LargeTopAppBar并未折叠，相关代码如下：

主应用代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyApp(modifier: Modifier = Modifier) {
    val navController: NavHostController = rememberNavController()
    var value by remember {
        mutableStateOf("")
    }
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        topBar = {
            AppTopBar(
                {
                    SearchFeature(
                        textFieldValue = value,
                        onValueChange = { value = it }
                    )
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { innerPadding ->
        NavHost(
            startDestination = MainApp,
            navController = navController,
            modifier = modifier
                .padding(innerPadding)
                .padding(vertical = 16.dp)
        ) {
            //NavHost content
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar(
    searchFeature: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    scrollBehavior: TopAppBarScrollBehavior
) {
    LargeTopAppBar(
        modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        title = { searchFeature() },
        scrollBehavior = scrollBehavior
    )
}

首页内容代码 #

@Composable
fun HomeScreen(
    categories: List<Category>,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier.fillMaxSize().verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        categories.forEach { category ->
            DataCard(title = category.title, imageUrl = category.imageUrl)
        }
    }
}

问题原因 #

当前使用的Column + verticalScroll组合未与TopAppBar的scrollBehavior建立嵌套滚动关联。verticalScroll修饰符默认不会主动将滚动事件传递给父组件的nestedScrollConnection，导致TopAppBar无法感知内容滚动，因此不会触发折叠行为。

修复方案 #

方案1：替换为LazyColumn（推荐） #

LazyColumn默认支持嵌套滚动，可自动与TopAppBar的scrollBehavior联动，只需将HomeScreen中的Column替换为LazyColumn即可：

@Composable
fun HomeScreen(
    categories: List<Category>,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(12.dp),
        contentPadding = PaddingValues(vertical = 16.dp) // 替代原有的padding设置
    ) {
        items(categories) { category ->
            DataCard(title = category.title, imageUrl = category.imageUrl)
        }
    }
}

方案2：给Column的verticalScroll添加嵌套滚动连接 #

若不想替换为LazyColumn，需将scrollBehavior传递到HomeScreen，并为verticalScroll添加nestedScroll修饰符：

1. 修改NavHost传递scrollBehavior：

// 在MyApp的NavHost中
composable(MainApp) {
    HomeScreen(
        categories = ..., // 传入你的categories数据
        scrollBehavior = scrollBehavior // 传递scrollBehavior实例
    )
}

2. 修改HomeScreen接收并使用scrollBehavior：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(
    categories: List<Category>,
    scrollBehavior: TopAppBarScrollBehavior,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .nestedScroll(scrollBehavior.nestedScrollConnection) // 添加嵌套滚动连接
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        categories.forEach { category ->
            DataCard(title = category.title, imageUrl = category.imageUrl)
        }
    }
}

注意事项 #

• 方案1更简洁，且LazyColumn处理大量数据时性能更优，优先推荐使用。
• 确保scrollBehavior在整个嵌套滚动层级中是同一个实例，才能正确传递滚动事件。

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