从透明到白色的渐变

Question

我想做一个像这样的导航条-&gt。

但是当我试着做的时候，我有一个阴影框，我不能解决它-> .

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

Answer 2

使用@Asperi.S的帮助。

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)