SwiftUI：如何基于GeometryReader内视图同步更新外部视图透明度？

我在SwiftUI中实现了一个图片滚动轮播视图，滚动图片时，叠加在图片上的Text元素透明度更新正常，但希望ScrollView外的另一个Text视图透明度也与之保持一致。

原代码如下：

struct ScrollTestView: View {
    var imageNames: [String] {
          Array(1...3).map {"main-ironman\($0)"}
      }
    
    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                HStack(spacing: 0) {
                    ForEach(imageNames, id: \.self) { imageName in
                        VStack(spacing: 0) {
                            GeometryReader(content: { geometry in
                                Image(imageName)
                                    .resizable()
                                    .frame(maxWidth: .infinity)
                                    .frame(height: 200)
                                    .overlay {
                                        VStack {
                                            Spacer()
                                            Text(imageName) // text item
                                                .font(.largeTitle)
                                                .foregroundStyle(.white)
                                                .opacity(1.0 - (abs(geometry.frame(in: .global).origin.x)/100.0))
                                        }
                                    }
                            })
                        }
                        .containerRelativeFrame(.horizontal)
                    }
                }
                .scrollTargetLayout()
            }
            .frame(height: 200)
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(.viewAligned)

            Text("SOME OTHER TEXT") // update opacity same as that of text item above
                .font(.largeTitle)
                .foregroundStyle(.black)
            Spacer()
        }
        .background(.orange)
    }
}

修改方案 #

通过添加状态变量共享透明度值，让外部文本同步使用该值：

struct ScrollTestView: View {
    var imageNames: [String] {
          Array(1...3).map {"main-ironman\($0)"}
      }
    // 新增状态变量存储当前透明度
    @State private var currentOpacity: Double = 1.0
    
    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                HStack(spacing: 0) {
                    ForEach(imageNames, id: \.self) { imageName in
                        VStack(spacing: 0) {
                            GeometryReader(content: { geometry in
                                let opacity = 1.0 - (abs(geometry.frame(in: .global).origin.x)/100.0)
                                Image(imageName)
                                    .resizable()
                                    .frame(maxWidth: .infinity)
                                    .frame(height: 200)
                                    .overlay {
                                        VStack {
                                            Spacer()
                                            Text(imageName) // text item
                                                .font(.largeTitle)
                                                .foregroundStyle(.white)
                                                .opacity(opacity)
                                        }
                                    }
                                    // 实时更新透明度状态
                                    .onAppear {
                                        currentOpacity = opacity
                                    }
                                    .onChange(of: geometry.frame(in: .global).origin.x) { _ in
                                        currentOpacity = opacity
                                    }
                            })
                        }
                        .containerRelativeFrame(.horizontal)
                    }
                }
                .scrollTargetLayout()
            }
            .frame(height: 200)
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(.viewAligned)

            Text("SOME OTHER TEXT")
                .font(.largeTitle)
                .foregroundStyle(.black)
                .opacity(currentOpacity) // 使用共享的透明度值
            Spacer()
        }
        .background(.orange)
    }
}

关键修改点 #

• 添加@State private var currentOpacity: Double = 1.0作为共享的透明度状态，所有需要同步的视图都绑定这个值
• 将透明度计算逻辑提取为单独的opacity常量，避免重复计算
• 在GeometryReader内部，通过onAppear和onChange监听视图位置变化，实时更新currentOpacity
• 外部Text视图直接使用currentOpacity实现透明度同步

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