主页 / coding / 问题 / 79070154
Accepted
joseph
Asked: 2024-10-09 20:09:57 +0800 CST

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

  • 772

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

[在此处输入图片描述]( https://isstatic.askoverflow.dev/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 固定在那里

1 个回答

  1. Best Answer

    公开scrollBehaviour一个状态变量scrollBehavior.state.collapsedFraction。它表示折叠到的百分比TopAppBar。您可以尝试使用它来为高度设置动画TextField。

    首先，允许传入ModifierComposable 中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((TextFieldDefaults.MinHeight + 16.dp) * (1 - scrollBehavior.state.collapsedFraction))
                    .clipToBounds()
                    .alpha(1 - scrollBehavior.state.collapsedFraction)
            )
        }
    },
    content = { padding ->
        //...
    }
)

    还请注意，我需要应用nestedScroll修改器才能Scaffold使其工作。

    输出：

    屏幕录制

    笔记：

    根据Material Design 指南，高度TextField等于56.dp高度加上顶部和底部的填充。8.dp

    • 1

相关问题