SwiftUI实现底部Sheet接触NavigationBar/TabView时背景变色

核心思路是通过监听内容的滚动偏移量，判断按钮区域是否与上方导航栏/内容接触，从而动态切换背景样式。以下是具体实现步骤：

1. 定义偏移量监听的PreferenceKey #

用这个Key捕获滚动视图的位置信息：

struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

2. 在滚动视图中添加偏移量监听 #

给ScrollView绑定坐标空间，通过背景视图传递偏移量：

ScrollView {
    // 放置你的长内容列表/视图
    ForEach(0..<50) { index in
        Text("列表项 \(index)")
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.gray.opacity(0.1))
    }
}
.background(
    GeometryReader { proxy in
        Color.clear
            .preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .named("scrollContainer")).minY)
    }
)
.coordinateSpace(name: "scrollContainer")

3. 构建动态背景的底部按钮区域 #

使用safeAreaInset添加底部按钮，根据偏移量切换背景：

@State private var shouldShowBackground = false

// 嵌入到视图层级中
.safeAreaInset(edge: .bottom) {
    Button("完成设置") {
        // 按钮点击逻辑
    }
    .frame(maxWidth: .infinity)
    .padding(.vertical, 12)
    .background(shouldShowBackground ? Color(UIColor.systemBackground) : .clear)
    .cornerRadius(12)
    .padding(.horizontal, 16)
    .shadow(color: shouldShowBackground ? .black.opacity(0.1) : .clear, radius: 4)
}
.onPreferenceChange(ScrollOffsetKey.self) { offset in
    // 根据实际布局调整阈值，示例中-60对应导航栏底部到按钮区域的临界位置
    shouldShowBackground = offset <= -60
}

4. Sheet场景适配 #

如果在Sheet中使用，配合presentationDetents设置弹窗尺寸，确保滚动视图占满可用空间：

.sheet(isPresented: $showSettingsSheet) {
    NavigationStack {
        // 上面的ScrollView和底部按钮区域
    }
    .presentationDetents([.medium, .large])
}

关键细节说明 #

• 阈值（示例中的-60）需要根据导航栏高度、按钮区域尺寸微调，确保刚好在内容滚动到接触按钮区域时触发背景切换
• 当内容较短无需滚动时，偏移量不会达到阈值，背景保持透明，自动实现“无内容时消失”的效果
• 如果是TabView场景，只需把ScrollView替换为TabView的内容视图，监听逻辑完全一致

内容的提问来源于stack exchange，提问作者mojo3325