如何将导航栏按钮添加到选择器

Question

如果所需选项不存在，用户应该能够向选择器添加新值。所以我基本上想用选项在视图中实现一个“添加”按钮。

我让它工作的唯一方法是向每个选项添加 .navigationBarItems 修饰符。但这似乎不仅是一种开销，而且如果列表的开头不包含任何选项，这也是一个问题（那么修饰符不会应用于任何元素，因此按钮不可见）。

我已经尝试了其他一些方法：

1. 将修饰符添加到 ForEach 会将所有选项合并到一个按钮中，因此无法再选择单个选项。
2. 在 Picker 下方添加 EmptyView 并将修饰符附加到它会导致列表中出现额外的空行。

---

import SwiftUI

struct ContentView: View {
    @State private var selection = 1
    let options = [Option(title: "Option 1", id: 1), Option(title: "Option 2", id: 2)]
    
    struct Option {
        var title: String
        var id: Int
    }

    var body: some View {
        NavigationView {
            Form {
                Picker("Test", selection: $selection) {
                    ForEach(options, id:\.id) { option in
                        Text(option.title).tag(option.id)
                        .navigationBarItems(trailing: Text("Add"))
                    }
                    .navigationBarTitle("Options", displayMode: .inline)
                }
                .navigationBarTitle("Form")
                .navigationBarItems(trailing: EmptyView())
            }
        }
    }
}

Answer 1

即时更改 diaplayMode 总是会产生不希望的效果，但如果您有相同的效果（或选项没有），那么以下方法可以工作。

使用 Xcode 11.4 / iOS 13.4 测试

struct ContentView: View {
    @State private var selection = 1
    @State private var options = [Option(title: "Option 1", id: 1), Option(title: "Option 2", id: 2)]

    struct Option {
        var title: String
        var id: Int
    }

    var body: some View {
        NavigationView {
            Form {
                Picker("Test", selection: $selection) {
                    ForEach(options, id:\.id) { option in
                        self.optionRow(for: option)
                    }
                    .listRowInsets(EdgeInsets(top: 1, leading: 1, bottom: 1, trailing: 1))
                }
            }
            .navigationBarTitle("Form")
//            .navigationBarTitle("Form", displayMode: .inline)
        }
    }

    @ViewBuilder
    func optionRow(for item: Option) -> some View {
        if item.id == selection {
            Text(item.title)
        } else {
            Text(item.title)
                .navigationBarTitle("Options")
//                .navigationBarTitle("Options", displayMode: .inline)
                .navigationBarItems(trailing: Button("Add") {
                    // example of creating new option
                    self.options.append(Option(title: "Option 3", id: 3))
                })
        }
    }
}