SwiftUI实现ScrollView矩形重叠文本变白（不受背景影响）

不用依赖blendMode的话，双层文本+蒙版裁剪是最可靠的方案，完全不受背景色变化影响，核心思路是让白色文本只在选中矩形区域内显示，覆盖底层的正常颜色文本。

实现步骤（以SwiftUI为例） #

• 底层放置正常颜色的滚动文本列表，同步记录滚动偏移量
• 上层放置完全相同的白色文本列表，通过偏移量和底层滚动保持同步
• 用选中区域的矩形作为蒙版，裁剪上层白色文本，只让矩形覆盖的部分显示白色文本

代码示例 #

struct WheelPickerView: View {
    let items: [String]
    @State private var scrollOffset: CGFloat = 0
    
    // 选中区域的尺寸，可根据需求调整
    let selectionFrameSize = CGSize(width: 200, height: 60)
    
    var body: some View {
        ZStack(alignment: .center) {
            // 1. 底层：正常颜色的滚动文本
            ScrollView(.vertical) {
                LazyVStack(spacing: 0) {
                    ForEach(items, id: \.self) { item in
                        Text(item)
                            .font(.title)
                            .frame(height: 40)
                            .frame(maxWidth: .infinity)
                    }
                }
                // 捕获滚动偏移量
                .background(GeometryReader { proxy in
                    Color.clear.preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .named("scrollView")).minY)
                })
            }
            .coordinateSpace(name: "scrollView")
            .onPreferenceChange(ScrollOffsetKey.self) {
                scrollOffset = $0
            }
            
            // 2. 上层：白色文本，仅在选中矩形区域显示
            LazyVStack(spacing: 0) {
                ForEach(items, id: \.self) { item in
                    Text(item)
                        .font(.title)
                        .foregroundColor(.white)
                        .frame(height: 40)
                        .frame(maxWidth: .infinity)
                }
            }
            .offset(y: scrollOffset) // 和底层滚动同步
            .mask(
                Rectangle()
                    .frame(size: selectionFrameSize)
                    .foregroundColor(.black) // 蒙版用不透明色确保裁剪生效
            )
            
            // 可选：添加选中区域边框
            Rectangle()
                .stroke(Color.black, lineWidth: 2)
                .frame(size: selectionFrameSize)
        }
    }
}

// 自定义PreferenceKey获取滚动偏移
private struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value += nextValue()
    }
}

// 扩展CGSize方便使用
private extension View {
    func frame(size: CGSize) -> some View {
        frame(width: size.width, height: size.height)
    }
}

方案优势 #

• 完全脱离对背景色的依赖：不管背景是纯色、渐变还是图片，白色文本只会在选中矩形内显示，效果稳定
• 性能友好：用LazyVStack避免大量文本加载的性能问题，蒙版裁剪是原生渲染操作，开销极低
• 灵活度高：可以随时调整选中区域的尺寸、边框样式，文本样式也能独立修改

如果是UIKit环境，思路一致：用两个UITableView（或UILabel列表），上层列表设置maskView为选中矩形，同步两个列表的滚动位置即可。

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