从透明到白色的渐变

Question

我想创建一个类似于这个导航栏的效果 -> 。

但是当我尝试创建时，出现了一个带有阴影框的问题，我无法解决它 -> 。

HStack {
    Spacer()
    FriendsButtonView(index: $index).frame(width: width/5, height: width/5)
    Spacer()
    FloatingButtonView(index: $index, open: $openModal).frame(width: width/5, height: width/5)
    Spacer()
    faqButtonView(index: $index).frame(width: width/5, height: width/5)
    Spacer()
}.frame(width: width, height: height/10)
.background(LinearGradient(gradient: Gradient(colors: [Color.clear, Color.white]), startPoint: .top, endPoint: .bottom))
.clipped()
.offset(y: height/2.225)

感谢您的帮助。

- pfnts

Answer 1

这是一种可能的解决方案的演示。已使用Xcode 11.4 / iOS 13.4进行测试。

struct DemoGradientHeaderView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 16)
                .foregroundColor(.white)
                .padding()
                .shadow(radius: 10)
            Text("What is the role of ambassador?").font(.largeTitle)
        }
        .overlay(LinearGradient(gradient: Gradient(colors: [Color.white.opacity(0.01), Color.white]),
            startPoint: .top, endPoint: .bottom))
        .frame(height: 160)
    }
}

- Asperi

---

你好，感谢您的回答。但是叠加层的问题在于无法点击按钮，我正在尝试使用渐变参数来解决。 - pfnts

可能值得添加一些关于为什么这是不同的解释。UIColor.clear 的 RGBA 值为 0, 0, 0, 0，即它是带有 0 不透明度的黑色。因此，在沿着渐变滑动时，它将经过... 0.1, 0.1, 0.1, 0.1 和 0.5, 0.5, 0.5, 0.5，然后才到达 1, 1, 1, 1。因此，它会从清晰变成透明灰色，最终变成白色。而您的解决方案从带有 0 不透明度的白色开始，因此没有相同的问题。 - Fogmeister

@sett_gekz，你应该在这个标题视图的上方添加按钮，即放置在外部ZStack或另一个覆盖层中。 - Asperi

Answer 2

借助@Asperi的帮助。

ZStack {
    VStack (spacing: 0) {
        Rectangle()
            .fill(LinearGradient(gradient: Gradient(colors: [Color.white.opacity(0.01), Color.white.opacity(1)]), startPoint: .top, endPoint: .bottom))
        Rectangle()
            .fill(Color.white)
    }
    .frame(width: width, height: height/10)

    HStack {
        Spacer()
        MoneyButtonView(index: $index)
            .frame(width: width/5, height: width/5)
        Spacer()
        HomeButtonView(index: $index)
            .frame(width: width/5, height: width/5)
        Spacer()
        PoolButtonView(index: $index)
            .frame(width: width/5, height: width/5)
        Spacer()
    }
}
.offset(y: height/2.225)
.frame(width: width, height: height/10)

- pfnts

Answer 3

只是为了重申@Fogmeister在评论中所说的： 从Color.clear到Color.white的渐变呈现灰色，原因是Color.clear与Color.black.opacity(0)相同。即使Color.black.opacity(0)和Color.white.opacity(0)看起来相同（它们都是透明的），但根据您选择的颜色不同，插值颜色将不同。

- Marcus Rossel