如何让Jetpack Compose的DockedSearchBar建议列表不推挤其他内容？

问题核心在于DockedSearchBar默认将建议列表作为自身布局的一部分，展开时会扩展顶部栏的高度，从而推动下方内容下移。要实现建议列表覆盖在内容上方，需要将建议列表从布局流中脱离，使用Popup组件承载建议内容。

修改后的SearchView代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchView(
    modifier: Modifier = Modifier
) {
    var text by rememberSaveable { mutableStateOf("") }
    var active by rememberSaveable { mutableStateOf(false) }
    val searchBarPosition = remember { mutableStateOf<IntOffset?>(null) }
    val searchBarSize = remember { mutableStateOf<IntSize?>(null) }

    Box(modifier = modifier) {
        DockedSearchBar(
            query = text,
            onQueryChange = { text = it },
            onSearch = { active = false },
            active = active,
            onActiveChange = { active = it },
            modifier = Modifier
                .onGloballyPositioned { coordinates ->
                    // 获取搜索栏的屏幕位置和尺寸，用于定位Popup
                    searchBarPosition.value = coordinates.localToWindow(IntOffset.Zero)
                    searchBarSize.value = coordinates.size
                }
        ) {
            // 原建议列表移至Popup中，此处留空
        }

        // 当搜索栏激活时，显示Popup承载建议列表
        if (active && searchBarPosition.value != null && searchBarSize.value != null) {
            Popup(
                positionProvider = { _, _ ->
                    // 将Popup定位在搜索栏正下方
                    val barPos = searchBarPosition.value!!
                    val barSize = searchBarSize.value!!
                    IntOffset(barPos.x, barPos.y + barSize.height)
                },
                onDismissRequest = { active = false } // 点击外部关闭Popup
            ) {
                // 保持与搜索栏一致的UI风格
                Surface(
                    modifier = Modifier.width(searchBarSize.value!!.width.toDp()),
                    shape = MaterialTheme.shapes.large,
                    tonalElevation = 4.dp
                ) {
                    Column {
                        repeat(5) { index ->
                            ListItem(
                                headlineContent = { Text("index $index") },
                                leadingContent = {
                                    Icon(Icons.Default.Star, contentDescription = null)
                                },
                                modifier = Modifier
                                    .clickable {
                                        text = "index $index"
                                        active = false
                                    }
                                    .fillMaxWidth()
                                    .padding(horizontal = 16.dp, vertical = 4.dp)
                            )
                        }
                    }
                }
            }
        }
    }
}

关键改动说明 #

1. 布局分离：将建议列表从DockedSearchBar的内置内容中移出，改用Popup组件承载，使建议内容脱离原布局流，不会挤压下方内容。
2. 精准定位：通过onGloballyPositioned获取搜索栏的屏幕坐标和尺寸，确保Popup准确显示在搜索栏正下方。
3. UI一致性：给Popup内的Surface设置与搜索栏相同的形状和阴影，保持整体视觉统一。
4. 交互优化：点击Popup外部或选择建议项时，自动关闭搜索栏的激活状态。

其他注意事项 #

• 修正了原代码中repeat(5) { index -的语法错误，改为index ->。
• MainScreen的代码无需修改，保持原结构即可。

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