将@State 属性的@Binding 值从容器视图传递到其子视图

如何解决将@State 属性的@Binding 值从容器视图传递到其子视图

我创建了一个用作容器视图的视图，该视图具有多个属性，我希望将其值传递给其同级视图。

下面的示例容器视图只存储填充值，并不是一个实际用例，但这个想法可以转移到一个（我将在最后解释）。

public struct Container<Content: View>: View {

let content: Content

// MARK: Padding
@State var bottom: CGFloat = .zero
@State var leading: CGFloat = .zero
@State var trailing: CGFloat = .zero
@State var top: CGFloat = .zero

// MARK: -
public init(padding: Padding...,@ViewBuilder content: () -> Content) {
    for pad in padding {
        switch pad {
            case .bottom(let padding):      bottom = padding
            case .leading(let padding):     leading = padding
            case .trailing(let padding):    trailing = padding
            case .top(let padding):         top = padding
            case .horizontal(let padding):  leading = padding
                                            trailing = padding
            case .vertical(let padding):    bottom = padding
                                            top = padding
        }
    }
    self.content = content()
}

// MARK: -
public var body: some View {
    content
        .padding(.bottom,bottom)
        .padding(.leading,leading)
        .padding(.top,top)
        .padding(.trailing,trailing)
}
}

extension Container {
    public enum Padding {
        case vertical(_:CGFloat)
        case horizontal(_:CGFloat)
        case leading(_:CGFloat)
        case trailing(_:CGFloat)
        case top(_:CGFloat)
        case bottom(_:CGFloat)
    }
}

实际上，这看起来像：

Container(padding:.vertical(50)) {
    /// children have no idea about Container’s set property values
}

而且它工作正常。但我想实现的是：

Container(padding:.vertical(50)) { padding in
    /// children have access to padding.bottom,top,leading,trailing
}

我在方法中的参考是 GeometryReader，它提供对 GeometryProxy 的访问，以供其兄弟视图依赖。

正如上面提到的，虽然我不太可能发现传递填充值的好处，但我关注的直接用例是创建一个可扩展的容器视图，该视图存储诸如 {{1 }} 和诸如 expanded: Bool 之类的方法附加到它的点击手势处理程序，该处理程序更改了 toggleExpanded() 的状态。

---

更新：

pawello2222 的建议对于我分享的示例代码在技术上是令人满意的。然而，由于值的静态性质，事实证明它不能立即转移到我的实际用例中，因为它涉及可以根据用户交互更改的值。学习到教训了！这是可扩展视图：

expanded

换句话说，我需要子视图能够访问 public struct Expandable<Content: View>: View { let content: Content @State public var expanded: Bool = false public init(@ViewBuilder content: ((Binding<Bool>)) -> Content) { self.content = content(($expanded)) } // MARK: - public var body: some View { content .onTapGesture(perform: toggle) } // MARK: - Methods func toggle() { expanded.toggle() } } 属性，因此它不仅能够读取当前的 @Binding expanded 值，而且还可以切换其状态备份给它的父级。

上面代码的问题是它告诉我：

expanded

解决方法

我不确定这是否是您想要的，但您可以尝试以下操作：

public init(padding: Padding...,@ViewBuilder content: ([Padding]) -> Content)
{
    self.content = content(padding)
    for pad in padding {
        // ...
    }
}

并像这样使用它：

Container(padding:.vertical(50)) { padding in
    // ...
}

编辑

您可以通过创建自定义 EnvironmentKey 来实现您在更新后的问题中想要实现的目标：

extension EnvironmentValues {
    private struct PaddingKey: EnvironmentKey {
        static let defaultValue: Binding<Padding> = .constant(.vertical(0)) // or any other default value
    }
    
    var padding: Binding<Padding> {
        get { self[PaddingKey] }
        set { self[PaddingKey] = newValue }
    }
}

struct ContentView: View {
    @State var padding: Padding = .vertical(50)

    var body: some View {
        Container(padding: padding) {
            ChildView()
            // ...
        }
        .environment(\.padding,$padding) // inject the binding into the environment
    }
}

struct ChildView: View {
    @Environment(\.padding) var padding  // inject the binding into the environment

    var body: some View {
        if case let .bottom(value) = padding.wrappedValue {
            Text("Bottom")
                .padding(.bottom,value)
        }
        // ...
        Button("Change") {
            padding.wrappedValue = .leading(50)
        }
    }
}

注意：您可以遵循相同的方法并在容器中使用 .environment(\.padding（而不是 Container(padding: padding)）。