SwiftUI提取带Binding、@State的可复用子视图问题求助

正确的可复用视图实现方式 #

直接提取成结构体视图是SwiftUI中复用组件的标准做法，能完美处理状态绑定和FocusState传递问题，避免函数式返回视图的常见错误。

1. 定义可复用的EditCell组件

struct EditCell: View {
    // 绑定父视图的内容状态
    @Binding var content: String
    // 绑定父视图的FocusState
    @FocusState.Binding var isFocused: Bool
    // 提交动作的闭包
    var onSubmit: () -> Void
    
    var body: some View {
        HStack {
            TextField("输入内容...", text: $content)
                .focused($isFocused)
                .submitLabel(.done)
                .onSubmit {
                    onSubmit()
                }
            
            Button("提交") {
                onSubmit()
            }
            .disabled(content.isEmpty)
        }
    }
}

2. 在父视图中调用组件

struct ParentView: View {
    // 父视图管理的内容状态
    @State private var newNoteContent = ""
    // 父视图管理的焦点状态
    @FocusState private var newNoteIsFocused = false
    
    var body: some View {
        VStack {
            // 直接调用复用组件，传递绑定和闭包
            EditCell(
                content: $newNoteContent,
                isFocused: $newNoteIsFocused,
                onSubmit: submitNewNote
            )
            
            // 其他视图内容...
        }
    }
    
    // 原有的提交方法
    private func submitNewNote() {
        guard !newNoteContent.isEmpty else { return }
        // 处理提交逻辑，比如保存笔记
        print("提交内容：\(newNoteContent)")
        newNoteContent = ""
        newNoteIsFocused = false
    }
}

为什么之前的实现会出错？ #

• 函数式返回视图：如果用func editCell() -> some View的方式，在处理@FocusState这类属性包装器的绑定时，容易因视图生命周期不匹配导致编译错误或运行时崩溃，SwiftUI更推荐用结构体视图作为复用单元。
• 结构体调用不当：如果之前提取结构体时没有正确传递Binding和FocusState.Binding，而是直接传递值类型，会导致状态无法同步，出现编译错误或视图无响应。

额外优化建议 #

可以给EditCell添加自定义参数，比如占位符文本、按钮标题，进一步提升复用性：

struct EditCell: View {
    @Binding var content: String
    @FocusState.Binding var isFocused: Bool
    var placeholder: String
    var buttonTitle: String
    var onSubmit: () -> Void
    
    var body: some View {
        HStack {
            TextField(placeholder, text: $content)
                .focused($isFocused)
                .submitLabel(.done)
                .onSubmit(onSubmit)
            
            Button(buttonTitle) {
                onSubmit()
            }
            .disabled(content.isEmpty)
        }
    }
}

// 调用时
EditCell(
    content: $newNoteContent,
    isFocused: $newNoteIsFocused,
    placeholder: "新建笔记...",
    buttonTitle: "保存",
    onSubmit: submitNewNote
)

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