SwiftUI自定义DisplayAsPopoverModifier弹窗内容空白问题排查

问题描述 #

在SwiftUI与UIKit混编的项目中，需实现视图逻辑：iPad上以居中白色背景视图展示，iPhone上以popover形式展示。编写的DisplayAsPopoverModifier修饰器出现异常：传入原content时弹窗内容为空，但传入Text("HI")能正常显示。

原代码 #

public struct DisplayAsPopoverModifier: ViewModifier {
    @Binding var isPresented: Bool
    var onDismiss: (() -> Void)?

    @ViewBuilder
    public func body(content: Content) -> some View {
        Color.clear
            .popover(isPresented: $isPresented) {
                content
            }
            .onChange(of: isPresented) { _, newValue in
                if !newValue {
                    onDismiss?()
                }
            }
    }
}

public extension View {
    func displayAsPopover(
        isPresented: Binding<Bool>,
        onDismiss: (() -> Void)? = nil
    ) -> some View {
        modifier(DisplayAsPopoverModifier(
            isPresented: isPresented,
            onDismiss: onDismiss
        ))
    }
}

#if DEBUG
struct DisplayAsPopoverModifier_Previews: PreviewProvider {
    static var previews: some View {
        VStack(spacing: 16) {
            Text("Title")
                .font(.largeTitle)

            Image(systemName: "star")
                .font(.largeTitle)
        }
        .displayAsPopover(isPresented: .constant(true))
    }
}
#endif 

问题原因 #

• 视图层级冲突：修饰器将原content直接放到Color.clear的popover中，原content同时作为被修饰视图和popover内容，SwiftUI的渲染机制会导致原视图的布局被覆盖，无法在popover中正常渲染。
• 无尺寸约束：自定义视图没有固有尺寸，在popover中会被压缩到0尺寸，视觉上呈现为空；而Text("HI")有固有尺寸，能被popover正确识别渲染。

解决方法 #

1. 修复修饰器核心逻辑 #

调整视图层级，避免冲突，并通过GeometryReader测量原视图尺寸，给popover内的content添加明确约束：

public struct DisplayAsPopoverModifier: ViewModifier {
    @Binding var isPresented: Bool
    var onDismiss: (() -> Void)?
    @State private var contentSize: CGSize = .zero

    @ViewBuilder
    public func body(content: Content) -> some View {
        // 原视图正常展示，同时通过背景视图测量尺寸
        content
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .onAppear {
                            contentSize = proxy.size
                        }
                }
            )
            .popover(isPresented: $isPresented) {
                // 在popover中复用content并应用尺寸约束
                content
                    .frame(width: contentSize.width, height: contentSize.height)
                    .background(Color.white)
            }
            .onChange(of: isPresented) { _, newValue in
                if !newValue {
                    onDismiss?()
                }
            }
    }
}

public extension View {
    func displayAsPopover(
        isPresented: Binding<Bool>,
        onDismiss: (() -> Void)? = nil
    ) -> some View {
        modifier(DisplayAsPopoverModifier(
            isPresented: isPresented,
            onDismiss: onDismiss
        ))
    }
}

#if DEBUG
struct DisplayAsPopoverModifier_Previews: PreviewProvider {
    static var previews: some View {
        VStack(spacing: 16) {
            Text("Title")
                .font(.largeTitle)

            Image(systemName: "star")
                .font(.largeTitle)
        }
        .displayAsPopover(isPresented: .constant(true))
    }
}
#endif

2. 补充iPad/iPhone差异化展示 #

结合设备类型判断，实现iPad居中白色背景、iPhone popover的需求：

@ViewBuilder
public func body(content: Content) -> some View {
    if UIDevice.current.userInterfaceIdiom == .pad {
        // iPad：居中白色背景弹窗
        ZStack {
            Color.black.opacity(0.3)
                .ignoresSafeArea()
                .onTapGesture {
                    isPresented = false
                    onDismiss?()
                }
            content
                .background(Color.white)
                .cornerRadius(12)
                .shadow(radius: 8)
        }
        .opacity(isPresented ? 1 : 0)
        .animation(.easeInOut, value: isPresented)
    } else {
        // iPhone：popover展示
        content
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .onAppear {
                            contentSize = proxy.size
                        }
                }
            )
            .popover(isPresented: $isPresented) {
                content
                    .frame(width: contentSize.width, height: contentSize.height)
            }
            .onChange(of: isPresented) { _, newValue in
                if !newValue {
                    onDismiss?()
                }
            }
    }
}

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