如何使用 Jetpack Compose 在 Android 中通过 Motion Layout 实现折叠标题？

Question

我很好奇，并尝试实现类似 Playstore 的 UI，当我尝试使用搜索栏实现折叠标题时，我无法获得我在 Jetpack compose 中寻找的确切代码或文档。

这就是我想要实现的目标：

目前在我的实现中，我有一个 ParentScreen，其中包含搜索栏视图和带有水平 viewPager 的选项卡视图。该选项卡包含两个屏幕“主屏幕和菜单屏幕”

在主屏幕中，它有一个LazyColumn，当用户滚动浏览HomeScreen中的lazyColumn时，我想实现在ParentScreen中隐藏/显示searchview的行为。

我可以通过在 Jetpack compose 中使用 Motionlayout 或任何其他类型的动画来实现此目的吗？ 任何帮助将不胜感激！

Answer 1

您可以通过

TopAppBar

和

enterAlwaysScrollBehavior

来实现。请参阅有关顶部应用栏的文档。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CollapsingTopAppBar() {
    val listItems = buildList { repeat(100) { add(it) } }
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBar(
                title = { Text("Search bar") },
                scrollBehavior = scrollBehavior
            )
        },
    ) { paddingValues ->
        var tab by rememberSaveable { mutableIntStateOf(0) }
        Column(
            modifier = Modifier.fillMaxSize().padding(paddingValues)
        ) {
            TabRow(selectedTabIndex = tab) {
                Tab(selected = true, onClick = { tab = 0 }) { Text("Tab 0") }
                Tab(selected = false, onClick = { tab = 1 }) { Text("Tab 1") }
                Tab(selected = false, onClick = { tab = 2 }) { Text("Tab 2") }
            }
            LazyColumn {
                items(items = listItems, key = { it }) {
                    Text(modifier = Modifier.height(32.dp).fillMaxWidth(), text = "Item $it")
                }
            }
        }
    }
}