How can I apply an overlay to an entire SwiftUI container view's children?

Question

I am trying to understand how to use container views in SwiftUI.

I am expecting this -

But when I run my app I get -

How can I wrap all the child views?

I am currently creating the views using the following -

struct InfoCallout<Content>: View where Content: View {
    let content: () -> Content
    @inlinable init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }
    
    var body: some View {
        content()
            .padding()
            .padding(.leading, 8)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
            .background(Color(hex: "eef6fc"))
            .overlay(
                Rectangle().frame(width: 10, alignment: .leading)
                    .foregroundColor(Color(hex: "3298dc")), alignment: .leading
            )
            .cornerRadius(16)
    }
}

struct ContentView: View {
    var body: some View {
        ScrollView(showsIndicators: false) {
            Group {
                InfoCallout {
                    Text("This is an info callout")
                    Text("This is an info callout")
                }
            }
        }.padding()
    }
}

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
            case 3: // RGB (12-bit)
                (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
            case 6: // RGB (24-bit)
                (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
            case 8: // ARGB (32-bit)
                (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
            default:
                (a, r, g, b) = (1, 1, 1, 0)
        }
        
        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue:  Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

I assumed that by adding the attributes to content they would all render

score 1 · Accepted Answer · answered Mar 08 '21 at 21:22

You can wrap content() in a VStack:

var body: some View {
        VStack {
            content()
        }
        .padding()
        .padding(.leading, 8)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        .background(Color(hex: "eef6fc"))
        .overlay(
            Rectangle().frame(width: 10, alignment: .leading)
                .foregroundColor(Color(hex: "3298dc")), alignment: .leading
        )
        .cornerRadius(16)
}

This makes it into a singular element, so the modifiers all apply to that one element.

score 1 · Answer 2 · answered Mar 08 '21 at 21:25

You should not use Group, xcode would think that they are deferent InfoCallout

struct ContentView: View {
    var body: some View {
        ScrollView(showsIndicators: false) {
            // Group {                                   //: << Here:
                InfoCallout {
                    Text("This is an info callout")
                    Text("This is an info callout")
                }
            // }                                         //: << Here:
        }.padding()
    }
}

How can I apply an overlay to an entire SwiftUI container view's children?

2 Answers2