如何在 SwiftUI 中将颜色扩展到顶部边缘之外

Question

我在滚动视图的顶部放置了一个线性渐变区域，如下所示：

struct ExperimentView: View {
  
  var body: some View {
    NavigationStack {

        
        ScrollView {
          VStack {
            LinearGradient(
              colors: [
                .blue.opacity(0.5),
                .clear
              ],
              startPoint: .top,
              endPoint: .bottom
            )
            .frame(height: 200)
            
            Text("Element")
            Text("Element")
            Text("Element")
            
          }
      }
        .ignoresSafeArea(.all)
    }
  }
}

问题是，滚动视图可以向下拉并显示顶部边缘上方的背景颜色。

那么有没有办法让蓝色向上延伸到顶部边缘之外，这样当向下拉时，它看起来仍然继续向上？

我尝试在渐变标题上方添加纯色，并设置和偏移到滚动视图内的VStack：

struct ExperimentView: View {
  
  let height = UIScreen.main.bounds.height
  
  var body: some View {
    NavigationStack {
      
      
      ScrollView {
        VStack(spacing:0) {
          
          Color.blue.opacity(0.5)
            .frame(height: height)
          
          LinearGradient(
            colors: [
              .blue.opacity(0.5),
              .clear
            ],
            startPoint: .top,
            endPoint: .bottom
          )
          .frame(height: 200)
          
          Text("Element")
          Text("Element")
          Text("Element")
          
        }
        .offset(y: -height)
      }
      .ignoresSafeArea(.all)
    }
  }
}

虽然它似乎适用于下拉，但偏移量会在可滚动区域的底部留下一个与屏幕高度相同的空间，向上滚动时留下一个完整的空白页面，而不是在到达最后一个元素时弹回滚动视图。

那么有没有更好的方法来解决这个问题呢？

Answer 1

只需将其放入 ZStack 即可：

ZStack {
    VStack { //<- Here
        LinearGradient(
            colors: [
                .blue.opacity(0.5),
                .clear
            ],
            startPoint: .top,
            endPoint: .bottom
        )
        .frame(maxHeight: 200)

        Spacer() //<- Add spacer() to align Linear to top
    }

    ScrollView {
        VStack {
            Text("Element")
            Text("Element")
            Text("Element")

        }
    }
}
.ignoresSafeArea(.all)