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

Question

我创建了一个充当容器视图的视图，它有多个属性，我希望将其值传递给它的同级视图。

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

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 的访问。

如顶部所述，虽然我不太可能发现传递填充值有什么好处，但我关注的直接用例是创建一个可扩展容器视图，该视图存储 expanded: Bool 和 toggleExpanded() 等方法附加到其点击手势处理程序，更改 expanded.

的状态

更新：

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

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 值，而且还有可能将其状态切换回其父级。

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

Variable 'self.content' used before being initialized

Answer 1

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

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)）。

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

Passing down @Binding values of @State properties from a container view to its children views

share

properties

view

swift

swiftui