Material 3 LargeTopAppBar 的定制

Question

我目前正在 Compose 中开发一个使用 Material 3 中的 LargeTopAppBar 的标题。问题是，标题不是很可定制，滚动动画（使用nestedScroll）也不是。我想在标题下方添加一个副标题，一旦 AppBar 折叠，该副标题将不会显示在小标题中。我还想知道是否有办法自定义标题的实际动画。

我知道 Material 3 仍处于 Alpha 阶段，但我很好奇是否有一些解决方案或解决方法。提前致谢！

Answer 1

LargeTopAppBar是一个material3 可组合项，在可定制性方面有其局限性，但很容易使用。

如果您需要不同的东西，您可以简单地为屏幕支架中的topBar参数创建一个可组合函数，它将实现您需要的所有功能。

Scaffold (
    topBar = { customTopBar() }
) { innerPadding ->
    YourScreen(modifier = modifier.padding(innerPadding))
}

如果您已经在代码中使用了 Scaffold，您可以简单地使用 when() 语句并为每个屏幕传递适当的可组合项！

对于副标题，您可以使用带有两个Text 的简单列，

Column {
    Text(text = "Title")

    if ( /* topBar state condition */ )
        Text(text = "Subtitle")
}

对于应用程序栏的其余部分，您可以有一个包含所有元素（取决于您的栏）的行，如下所示：

Row(
    verticalAlignment = Alignment.CenterVertically
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Row {
        IconButton(...) // For the back button

        // Your title and subtitle Column()
        Column {
            Text(text = "Title")

            if ( /* topBar state condition */ )
                Text(text = "Subtitle")
        }
    }

    // Rest of the IconButtons if needed
    Row {
        IconButton(...)
        IconButton(...)
    }
}

抱歉，我不太熟悉 Jetpack Compose 动画，但它应该很容易实现，因为他们的库非常易于使用，并且您可以随时查看他们网站上的文档。

Material3 元素仍处于 alpha 阶段，但使用简单的表面/盒子/等元素，您可以制作大多数所需的自定义设计。

希望我能帮上忙！