从透明到白色的渐变

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)

感谢帮助。

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