如何将覆盖应用到整个 SwiftUI 容器视图的子视图？答案

【问题标题】：How can I apply an overlay to an entire SwiftUI container view's children?如何将覆盖应用到整个 SwiftUI 容器视图的子视图？
【发布时间】：2021-06-06 18:34:09
【问题描述】：

我正在尝试了解如何在 SwiftUI 中使用容器视图。

我期待这个 -

但是当我运行我的应用程序时，我得到了 -

如何包装所有子视图？

我目前正在使用以下方法创建视图 -

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
        )
    }
}

我假设通过将属性添加到content，它们都会呈现

【问题讨论】：

标签： ios swift swiftui viewbuilder swiftui-view

【解决方案1】：

您可以将content() 包装在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)
}

这使它成为一个单一的元素，所以修饰符都适用于那个元素。

【讨论】：

【解决方案2】：

你不应该使用 Group，xcode 会认为它们是不同的 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()
    }
}

【讨论】：