Jetpack 撰写 AppBar 不会折叠下面的搜索视图

Question

我需要折叠 TopAppbar 和搜索视图，并且选项卡布局应该粘在那里。我尝试了不同的方法，但 Searchview 没有折叠，它固定在 MediumTopApp 栏下方。

[在此输入图片描述](https://i.sstatic.net/rUq5nDLk.png)

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun MyCollapsingLayout() {
    // Define state for tabs
    val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
    var selectedTabIndex by remember { mutableIntStateOf(0) }
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()

    // LazyColumn state to detect scrolling
    val listState = rememberLazyListState()

    Scaffold(
        topBar = {
            // Wrapping both the MediumTopAppBar and the SearchBar in a single Column
            Column(
                modifier = Modifier
                    .nestedScroll(scrollBehavior.nestedScrollConnection) // Attach scroll behavior
                    .fillMaxWidth()
                    .zIndex(1f)
            ) {
                // MediumTopAppBar with collapsing behavior
                MediumTopAppBar(
                    title = { Text("Medium AppBar") },
                    scrollBehavior = scrollBehavior
                )

                // Search bar is part of the collapsible area
                SearchBar()
            }
        },
        content = { padding ->
            LazyColumn(
                state = listState, // Attach LazyColumn to listen for scrolling
                modifier = Modifier
                    .fillMaxSize()
                    .padding(padding)
            ) {
                // Sticky header for TabRow, it will stay at the top when scrolled
                stickyHeader {
                    TabRow(
                        selectedTabIndex = selectedTabIndex,
                        modifier = Modifier
                            .fillMaxWidth()
                            .zIndex(1f) // Ensures the tab stays above scrolling content
                    ) {
                        tabs.forEachIndexed { index, tab ->
                            Tab(
                                selected = selectedTabIndex == index,
                                onClick = { selectedTabIndex = index },
                                text = { Text(tab) }
                            )
                        }
                    }
                }

                // The rest of the scrollable content
                items(50) { index ->
                    ListItem(text = "Item $index")
                }
            }
        }
    )
}

@Composable
fun SearchBar() {
    // Search Bar composable that will scroll away with the MediumTopAppBar
    TextField(
        value = "",
        onValueChange = {},
        placeholder = { Text("Search...") },
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    )
}

@Composable
fun ListItem(text: String) {
    Text(
        text = text,
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    )
}

我需要折叠TopAppBar和SearchView

现在 TopAppBr 已折叠，但 searchview 固定在那里

Answer 1

scrollBehaviour

暴露了一个状态变量

scrollBehavior.state.collapsedFraction

。它表示

TopAppBar

折叠的百分比。您可以尝试使用它来动画

TextField

的高度。

首先，允许将

Modifier

传递到

SearchBar

可组合项中：

@Composable
fun SearchBar(modifier: Modifier) {
    TextField(
        value = "",
        onValueChange = {},
        placeholder = { Text("Search...") },
        modifier = modifier  // apply the passed in Modifier here
            .fillMaxWidth()
            .padding(8.dp)
    )
}

然后，调用如下：

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        Column(
            modifier = Modifier.fillMaxWidth()
        ) {
            MediumTopAppBar(
                title = { Text("Medium AppBar") },
                scrollBehavior = scrollBehavior
            )
            SearchBar(
                modifier = Modifier
                    .height(72.dp * (1 - scrollBehavior.state.collapsedFraction))
                    .clipToBounds()
                    .alpha(1 - scrollBehavior.state.collapsedFraction)
            )
        }
    },
    content = { padding ->
        //...
    }
)

另请注意，我需要在

nestedScroll

上应用

Scaffold

修改器才能使其正常工作。

输出：