Jetpack Compose TopAppBar 嵌入搜索栏

Question

我正在尝试实现一些我认为应该很容易的事情，但我遇到了困难。

我有一个屏幕，其中包含脚手架、顶栏和惰性列作为内容：

我使用带有 enterAlwaysScrollBehavior 的 M3 TopAppBar，因此当内容滚动时它会消失/出现。

我想做的是实现搜索按钮。如何才能使点击搜索图标后，“卡片”标题变成文本字段以输入搜索查询？

我使用 Row 和 Crossfade 而不是 TopAppBar 轻松完成了此操作，但随后我失去了scrollBehavior 功能。

有什么想法吗？

谢谢，新年快乐！

Answer 1

我没有失去滚动的能力：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun SearchAppBar() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    var isSearch by remember { mutableStateOf(false) }
    var value by remember { mutableStateOf("") }

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            Crossfade(
                targetState = isSearch,
                label = "Search"
            ) { target ->
                if (!target) {
                    TopAppBar(
                        title = { Text("Cards") },
                        actions = { IconButton(Icons.Filled.Search) { isSearch = !isSearch } },
                        scrollBehavior = scrollBehavior,
                    )
                } else {
                    TextField(
                        modifier = Modifier
                            .fillMaxWidth()
                            .windowInsetsPadding(TopAppBarDefaults.windowInsets),
                        value = value,
                        placeholder = { Text("Enter card name") },
                        onValueChange = { value = it },
                        trailingIcon = { IconButton(Icons.Filled.Close) { isSearch = !isSearch } }
                    )
                }
            }
        },
    ) { paddingValues ->
        LazyColumn(
            Modifier
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            items(200) { index ->
                Text(modifier = Modifier.fillMaxWidth(), text = "Title $index")
            }
        }
    }
}

@Composable
fun IconButton(imageVector: ImageVector, onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = imageVector,
            contentDescription = null
        )
    }
}