Jetpack Compose Material3 SearchBar在Scaffold中滚动异常问题

要同时实现「整体内容（含顶部栏）可滚动」和「SearchBar点击全屏展开」的需求，核心是让展开状态的SearchBar脱离滚动容器的约束层级，避免父滚动组件的尺寸限制导致溢出错误。以下是具体实现方案：

实现思路 #

1. 使用NestedScrollView替代普通Column作为Scaffold的内容容器，配合ScrollBehavior实现顶部栏和搜索栏的联动滚动；
2. 通过状态变量控制SearchBar的展开状态：非展开时放在滚动内容中跟随滚动，展开时在全屏层级渲染独立的SearchBar，脱离滚动容器的约束。

代码示例 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ResourcesScreen() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
    var searchExpanded by remember { mutableStateOf(false) }
    var searchQuery by remember { mutableStateOf("") }

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
    ) { innerPadding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
        ) {
            // 滚动内容区：顶部栏 + 非展开状态搜索栏 + 列表
            NestedScrollView(
                modifier = Modifier.fillMaxSize(),
                scrollBehavior = scrollBehavior
            ) {
                Column {
                    // 自定义顶部栏
                    MediumTopAppBar(
                        title = { Text("资源页面") },
                        modifier = Modifier.fillMaxWidth()
                    )

                    // 非展开状态的搜索栏（仅作为触发入口）
                    if (!searchExpanded) {
                        SearchBar(
                            query = searchQuery,
                            onQueryChange = { searchQuery = it },
                            onSearch = { /* 执行搜索逻辑 */ },
                            expanded = searchExpanded,
                            onExpandedChange = { searchExpanded = true },
                            modifier = Modifier.fillMaxWidth()
                                .padding(horizontal = 16.dp, vertical = 8.dp)
                        ) {}
                    }

                    // 列表内容
                    LazyColumn(
                        modifier = Modifier.fillMaxWidth(),
                        contentPadding = PaddingValues(vertical = 16.dp)
                    ) {
                        items(100) { index ->
                            Text(
                                "资源项 $index",
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(horizontal = 16.dp, vertical = 12.dp)
                            )
                        }
                    }
                }
            }

            // 展开状态的全屏搜索栏
            if (searchExpanded) {
                SearchBar(
                    query = searchQuery,
                    onQueryChange = { searchQuery = it },
                    onSearch = {
                        /* 执行搜索逻辑 */
                        searchExpanded = false
                    },
                    expanded = searchExpanded,
                    onExpandedChange = { searchExpanded = false },
                    modifier = Modifier
                        .fillMaxSize()
                        .background(MaterialTheme.colorScheme.surface)
                ) {
                    // 搜索建议列表
                    LazyColumn(
                        modifier = Modifier.fillMaxWidth(),
                        contentPadding = PaddingValues(16.dp)
                    ) {
                        items(20) { suggestionIndex ->
                            Text(
                                "搜索建议 $suggestionIndex",
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(vertical = 8.dp)
                            )
                        }
                    }
                }
            }
        }
    }
}

方案说明 #

• 滚动联动：通过NestedScrollView和scrollBehavior实现顶部栏、非展开状态搜索栏与列表内容的同步滚动；
• 约束规避：展开状态的SearchBar直接渲染在Box的顶层，使用fillMaxSize()占据全屏，完全脱离滚动容器的尺寸约束，从根源解决IllegalArgumentException报错；
• 状态同步：通过searchExpanded和searchQuery两个状态变量，同步两个SearchBar的展开状态与搜索内容，保证交互一致性。

可选优化 #

如果觉得重复写SearchBar代码冗余，可以将搜索栏逻辑抽成独立的@Composable组件，通过参数传递状态与回调，减少代码重复。

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