如何在元素底部添加高程？ 噴氣背包組成

Question

我試圖在元素的底部添加一些高程或陰影。 對於這個元素，我使用 Tab 可組合。 如何在附加圖像的底部添加此高程/陰影？

如果您可以看到，Text Field 元素周圍有陰影。 對於這個元素，我添加

shape = 8.dp,
elevation = 6.dp

在 Surface 元素內部。 但是我不能在 Tab 可組合中使用相同的屬性，此外，形狀和高度會添加到所有組件周圍，但我只想要“用戶”和“待定用戶”選項卡底部的“陰影”。

對於這個實現，我使用的是 Jetpack Compose

Answer 1

您應該在 Compose 中為元素添加高程和陰影的方式是使用Surfaces作為其他內容的容器。

來自Surface文檔

材料表面是材料設計的核心隱喻。 每個表面都存在於給定的高度，這會影響該表面如何在視覺上與其他表面相關，以及該表面如何通過色調變化進行修改。

因此，要將陰影添加到選項卡布局中，您可以執行以下操作

Surface(
    shadowElevation = 9.dp, // play with the elevation values
) {
    Column {
        TabRow(...) // your current TabRow content
    }
}

如果上面沒有提供所需的陰影效果（我需要一個更強的陰影），並且因為你有一個矩形形狀，你可以使用線性漸變來代替。

編寫一個@Composable函數來制作“影子”

@Composable
fun BottomShadow(alpha: Float = 0.1f, height: Dp = 8.dp) {
    Box(modifier = Modifier
        .fillMaxWidth()
        .height(height)
        .background(
            brush = Brush.verticalGradient(
                colors = listOf(
                    Color.Black.copy(alpha = alpha),
                    Color.Transparent,
                )
            )
        )
    )
}

然后在現有的 Compose 布局中使用它

Column {
    TabRow(...) // your current TabRow content

    BottomShadow(alpha = .15f, height = 8.dp) // use higher alpha for a stronger shadow
}

Answer 2

您可以在 TabRow 上使用修飾符shadow 。 例如，要添加默認的頂部應用欄高度，您可以執行以下操作：

TabRow(
    modifier = modifier.shadow(AppBarDefaults.TopAppBarElevation),
    ...
)