SwiftUI实现图片置顶所有窗口？解决View协议报错问题

错误原因 #

你遇到的"Static method 'buildExpression' requires that 'TopImageView' conform to 'View'"错误，是因为TopImageView实现的是ViewModifier协议，但你直接把它当作View放在了ContentView的body中。ViewModifier需要通过.modifier()方法附加到已有视图上，不能直接作为独立视图使用。

修正方案 #

1. 修正ContentView中TopImageView的使用方式 #

把TopImageView作为修饰符应用到具体视图上，比如一个触发按钮：

struct ContentView: View {
    @State var showImage = false
    var body: some View {
        Button("显示全屏图片") {
            showImage.toggle()
        }
        .modifier(TopImageView(isPresented: $showImage, image: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg"))
    }
}

2. 优化TopImageView实现，确保层级在Sheets之上 #

原方案通过添加子视图的方式无法覆盖Sheets（Sheets拥有独立窗口层级），我们改为创建更高层级的独立窗口承载图片，并完善生命周期管理：

struct TopImageView: ViewModifier {
    @Binding var isPresented: Bool
    @State private var hostingController: UIHostingController<TopImage>? = nil
    @State private var overlayWindow: UIWindow? = nil // 保存窗口引用，防止被释放
    let image: String

    func showImage() {
        let swiftUIView = TopImage(image: image)
        hostingController = UIHostingController(rootView: swiftUIView)
        hostingController?.view.backgroundColor = .clear
        
        guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene else { return }
        
        // 创建独立窗口，设置高于Sheet的层级
        let overlayWindow = UIWindow(windowScene: windowScene)
        overlayWindow.rootViewController = hostingController
        overlayWindow.backgroundColor = .clear
        overlayWindow.windowLevel = .alert + 1 // Sheet默认层级为.alert，+1确保在其之上
        overlayWindow.isHidden = false
        self.overlayWindow = overlayWindow
        
        // 初始位置在屏幕下方
        hostingController?.view.frame = CGRect(
            x: 0,
            y: windowScene.screen.bounds.height,
            width: windowScene.screen.bounds.width,
            height: 0)
        
        // 动画滑入
        UIView.animate(withDuration: 0.5) {
            let contentSize = self.hostingController!.view.sizeThatFits(CGSize(
                width: windowScene.screen.bounds.width,
                height: .greatestFiniteMagnitude))
            self.hostingController?.view.frame.origin.y = windowScene.screen.bounds.height - contentSize.height
            self.hostingController?.view.frame.size.height = contentSize.height
        }
    }

    func dismissImage() {
        // 动画滑出后销毁窗口
        UIView.animate(withDuration: 0.5) {
            self.hostingController?.view.frame.origin.y = UIScreen.main.bounds.height
        } completion: { _ in
            self.overlayWindow?.isHidden = true
            self.overlayWindow = nil
            self.hostingController = nil
        }
    }

    func body(content: Content) -> some View {
        content
            .onChange(of: isPresented) { newValue in
                if newValue {
                    showImage()
                } else {
                    dismissImage()
                }
            }
    }
}

3. 补全TopImage中缺失的方法 #

原代码中的widthOrHeight函数未定义，补充实现如下：

struct TopImage: View {
    let image: String
    @State var imageHeight: Double = 0.0
    @State var imageWidth: Double = 0.0
    @State var opac: Double = 1.0
    @State private var offset: CGPoint = .zero
    @State private var lastTranslation: CGSize = .zero

    var body: some View {
        ZStack {
            Rectangle().foregroundColor(.black).opacity(opac).ignoresSafeArea()
            GeometryReader { geometry in
                // 若使用KFImage需提前导入Kingfisher库，此处先用系统图片示例
                KFImage(URL(string: image))
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .offset(x: offset.x + (widthOrHeight(width: true) - imageWidth) / 2.0, y: offset.y + (widthOrHeight(width: false) - imageHeight) / 2.0)
                    .background(
                        GeometryReader { proxy in
                            Color.clear
                                .onChange(of: proxy.size) { size in
                                    imageHeight = size.height
                                    imageWidth = size.width
                                }
                        }
                    )
            }
        }
        .ignoresSafeArea()
        .onTapGesture {
            // 可选：点击背景关闭图片，需通过绑定传递关闭事件
        }
    }

    // 补全缺失的widthOrHeight方法
    private func widthOrHeight(width: Bool) -> Double {
        width ? UIScreen.main.bounds.width : UIScreen.main.bounds.height
    }
}

关键说明 #

• 窗口层级设置：通过windowLevel = .alert + 1确保图片窗口层级高于Sheets。
• 生命周期管理：保存overlayWindow引用避免被提前释放，关闭时执行动画并销毁窗口防止内存泄漏。
• ViewModifier用法：必须通过.modifier()将TopImageView附加到现有视图上，不能直接作为View使用。

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