如何在SwiftUI视图中支持可选Binding？

要让Accordion视图同时支持内部自主管理状态和外部传入Binding控制状态，可以通过以下方式修改代码：

修改后的完整代码 #

public struct Accordion<Trigger, Content>: View where Trigger: View, Content: View {
    let trigger: Trigger
    let content: Content
    
    // 内部默认状态，仅在无外部Binding时启用
    @State private var internalIsExpanded = false
    // 存储外部传入的可选Binding
    private let externalIsExpanded: Binding<Bool>?
    
    // 统一状态访问入口：优先使用外部Binding，否则用内部状态
    private var isExpandedBinding: Binding<Bool> {
        externalIsExpanded ?? $internalIsExpanded
    }
    
    // 无外部Binding的初始化器（默认使用内部状态）
    public init(@ViewBuilder trigger: () -> Trigger, @ViewBuilder content: () -> Content) {
        self.externalIsExpanded = nil
        self.trigger = trigger()
        self.content = content()
    }
    
    // 带外部Binding的初始化器（允许外部控制状态）
    public init(isExpanded: Binding<Bool>, @ViewBuilder trigger: () -> Trigger, @ViewBuilder content: () -> Content) {
        self.externalIsExpanded = isExpanded
        self.trigger = trigger()
        self.content = content()
    }
    
    public var body: some View {
        ZStack {
            VStack(spacing: 0.0) {
                triggerWrappedView
                    .onTapGesture {
                        isExpandedBinding.wrappedValue.toggle()
                    }
                
                // 根据状态控制内容显示/隐藏（Accordion核心逻辑）
                if isExpandedBinding.wrappedValue {
                    content
                }
            }
        }
    }
    
    // 包装触发视图，可添加状态指示UI
    private var triggerWrappedView: some View {
        trigger
            .overlay(alignment: .trailing) {
                Image(systemName: isExpandedBinding.wrappedValue ? "chevron.down" : "chevron.right")
                    .rotationEffect(.degrees(isExpandedBinding.wrappedValue ? 0 : -90))
                    .animation(.easeInOut, value: isExpandedBinding.wrappedValue)
            }
    }
}

关键实现细节 #

1. 状态分层管理

   • 保留internalIsExpanded作为内部默认状态，当用户不需要外部控制时自动启用。
   • 添加可选属性externalIsExpanded接收外部传入的Binding，通过计算属性isExpandedBinding统一状态访问逻辑，无需在视图中区分状态来源。

2. 双初始化器设计

   • 提供两个初始化器：一个不带Binding参数（默认用内部状态），一个带Binding参数（支持外部控制），满足不同场景的使用需求。

3. 视图逻辑统一

   • 点击触发视图时，通过isExpandedBinding.wrappedValue.toggle()切换状态，无论状态来自内部还是外部都会同步生效。
   • 补充了内容的显示/隐藏逻辑，这是Accordion组件的核心功能，原代码中未实现，建议保留。
   • 在触发视图上添加了状态指示图标（可按需调整），让用户直观感知当前展开状态。

使用示例 #

// 场景1：仅使用内部状态的Accordion
Accordion(
    trigger: {
        Text("点击展开内容")
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
    },
    content: {
        Text("这是展开后的内容区域")
            .padding()
            .background(Color.blue.opacity(0.1))
            .cornerRadius(8)
    }
)

// 场景2：使用外部Binding控制的Accordion
struct ParentView: View {
    @State private var isAccordionExpanded = false
    
    var body: some View {
        VStack {
            Button("外部切换展开状态") {
                isAccordionExpanded.toggle()
            }
            
            Accordion(
                isExpanded: $isAccordionExpanded,
                trigger: {
                    Text("外部控制的Accordion")
                        .padding()
                        .background(Color.gray.opacity(0.2))
                        .cornerRadius(8)
                },
                content: {
                    Text("外部状态控制的内容")
                        .padding()
                        .background(Color.blue.opacity(0.1))
                        .cornerRadius(8)
                }
            )
        }
    }
}

内容的提问来源于stack exchange，提问作者Kunal Kamble