如何在 Jetpack Compose 中使用 TopAppBar 设置渐变背景

Question

我想设置我的TopAppBar的渐变背景：

我的代码：

TopAppBar(
    modifier = Modifier.background(
        Brush.horizontalGradient(
            colors = listOf(
                Color.Red,
                Color.Green
            )
        )
    ),
    title = { Text("UI Components") },
    backgroundColor = Color.Transparent
)

结果：

我在这篇文章中发现了：Jetpack Compose Button with gradient background?，它提到了按钮 - 所以我设置了透明的 backgroundColor 和自定义的背景通过一个 modifier。可悲的是，在我的情况下，文本周围还有额外的阴影，我不知道如何去除它。我应该更改什么，或者 TopAppBar 只是不适合使用渐变，我应该完全自定义写一些东西呢？

- Krystian Kaniowski

Answer 1

这个阴影是由于默认的elevation引起的。将其设为零：

TopAppBar(
    modifier = Modifier.background(
        Brush.horizontalGradient(
            colors = listOf(
                Color.Red,
                Color.Green
            )
        )
    ),
    title = { Text("UI Components") },
    backgroundColor = Color.Transparent,
    elevation = 0.dp
)

- Phil Dukhov

Answer 2

在 Material3 中的 TopAppBar 如下所示：

TopAppBar(
    modifier = Modifier.background(
    Brush.horizontalGradient(
        colors = listOf(
            Color.Red,
            Color.Green
            )
        )
    ),
    title = { Text("UI Components") },
    colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Color.Transparent, navigationIconContentColor = onPrimaryColor, titleContentColor = onPrimaryColor),
)

注意：containerColor = Color.Transparent

- Zoran

Answer 3

在最新的TopAppbar中，你不能设置backgroundColor = Color.Transparent，而是必须使用其他方法。

colors = TopAppBarDefaults.topAppBarColors(
            containerColor = Color.Transparent
        )

- Narendra_Nath