如何将覆盖应用于整个 SwiftUI 容器视图的子级？

问题描述

我想了解如何在 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,b) = (255,(int >> 8) * 17,(int >> 4 & 0xF) * 17,(int & 0xF) * 17)
            case 6: // RGB (24-bit)
                (a,int >> 16,int >> 8 & 0xFF,int & 0xFF)
            case 8: // ARGB (32-bit)
                (a,b) = (int >> 24,int >> 16 & 0xFF,int & 0xFF)
            default:
                (a,b) = (1,1,0)
        }
        
        self.init(
            .sRGB,red: Double(r) / 255,green: Double(g) / 255,blue:  Double(b) / 255,opacity: Double(a) / 255
        )
    }
}

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

解决方法

您可以将 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)
}

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

,

你不应该使用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()
    }
}