如何在SwiftUI中访问子视图？

schinj 发表于 Dev

申奇

我正在尝试我们的SwiftUI，并想在SwiftUI的组件上创建一个组件。所以，这是我要做的事情：

创建一个新的视图扩展 View

struct CustomComponent: View {
    var title: String
    var body: some View {
        HStack {
            Image(systemName: "") // This would be updated through style
            Text(verbatim: title)
        }

    }
}

extension View {

    public func componentStyle<S>(_ style: S) -> some View where S : ComponentStyle {
        guard self is CustomComponent else {
            return AnyView(self)
        }

        return AnyView(
// Here I want to add the spacing attribute of the style to the HStack.
// Also I want to update the Image with the corresponding style's icon.
// If it's not possible here, please suggest alternate place.
            self
                .foregroundColor(style.tintColor)
                .frame(height: style.height)
        )
    }

}

public protocol ComponentStyle {
    var icon: String { get }
    var tintColor: Color { get }
    var spacing: CGFloat { get }
    var height: CGFloat { get }
}

struct ErrorStyle: ComponentStyle {
    var icon: String {
        return "xmark.octagon"
    }

    var tintColor: Color {
        return .red
    }

    var spacing: CGFloat {
        return 8
    }

    var height: CGFloat {
        return 24
    }
}

如何实现以下目标：

如何将样式的interval属性添加到HStack？
如何使用相应样式的图标更新图像？

谢谢

pawello2222

您可以创建一个自定义EnvironmentKey：

extension EnvironmentValues {
    private struct ComponentStyleKey: EnvironmentKey {
        static let defaultValue: ComponentStyle = ErrorStyle()
    }
    
    var componentStyle: ComponentStyle {
        get { self[ComponentStyleKey] }
        set { self[ComponentStyleKey] = newValue }
    }
}

并用它来传递一些ComponentStyle作为@Environment变量：

struct ContentView: View {
    var body: some View {
        CustomComponent(title: "title")
            .componentStyle(ErrorStyle())
    }
}

struct CustomComponent: View {
    @Environment(\.componentStyle) private var style: ComponentStyle
    var title: String

    var body: some View {
        HStack(spacing: style.spacing) {
            Image(systemName: style.icon)
            Text(verbatim: title)
        }
    }
}

extension CustomComponent {
    func componentStyle<S>(_ style: S) -> some View where S: ComponentStyle {
        environment(\.componentStyle, style)
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。