如何优雅地在 SwiftUI 中将颜色延伸到顶边缘？

IOS

2024-03-01 11:57:23

在 SwiftUI 中将颜色延伸到顶边缘以外

背景

在 SwiftUI 的 ScrollView 顶部放置颜色或渐变区域时，当向下拖动滚动视图时，背景颜色可能会在顶边缘上方显示。这可能会破坏无缝的视觉效果，特别是在试图创建沉浸式体验时。

解决办法

为了解决这个问题，我们可以使用 GeometryReader 和偏移量来动态调整颜色区域的高度，从而确保颜色在任何时候都覆盖顶边缘。

步骤：

在 ScrollView 内部放置一个 GeometryReader。
在 GeometryReader 中，创建两个重叠的 ZStack 层：一个用于颜色区域，另一个用于渐变。
使用 GeometryReader 的 safeAreaInsets 属性来获取安全区域的偏移量。
使用 offset 修改器将渐变层向上移动，以抵消安全区域的偏移量。
使用 ignoresSafeArea(.all) 修改器告诉滚动视图忽略安全区域，这样颜色区域就可以延伸到顶边缘以外。

示例代码

struct ExperimentView: View {
  var body: some View {
    NavigationStack {
      ScrollView {
        GeometryReader { geometry in
          ZStack {
            Color.blue.opacity(0.5)
              .frame(width: geometry.size.width, height: geometry.safeAreaInsets.top + 200)

            LinearGradient(
              colors: [.blue.opacity(0.5), .clear],
              startPoint: .top,
              endPoint: .bottom
            )
            .frame(height: 200)
            .offset(y: -geometry.safeAreaInsets.top)

            VStack {
              Text("Element")
              Text("Element")
              Text("Element")
            }
          }
        }
        .ignoresSafeArea(.all)
      }
    }
  }
}