Swiftui 从透明到白色的渐变

我想做一个像这样的导航栏->

但当我尝试这样做时，我有一个阴影框，我无法解决它->

---

谢谢您的帮助。

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

使用@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)

---

只是重申一下@Fogmeister在评论中说的话：

---

从

Color.clear

到

Color.white

的渐变颜色为灰色的原因是

Color.clear

与

Color.black.opacity（0）

相同。即使

Color.black.opacity（0）

和

Color.white.opacity（0）

看起来一样（它们都是透明的），插值的颜色也会根据您选择的颜色而有所不同。

您好，谢谢您的回答，但是叠加的问题是无法点击按钮，但我试图用梯度参数来解释为什么这是不同的<代码>UIColor.clear的RGBA值为

0,0,0,0

即为黑色，不透明度为0。所以当沿着梯度滑动时，它会通过<在到达

1,1,1,1,1之前，代码>0.1,0.1,0.1

和

0.5,0.5,0.5

。从透明到透明的灰色再到白色都是如此。而您的解决方案从白色开始，不透明度为0，因此没有相同的问题。@sett_gekz，您应该在该标题视图上方添加按钮，即添加到外部ZStack或其他覆盖中

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)
    }
}

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)