SwiftUI 如何将完成按钮添加到选择器答案

【问题标题】：SwiftUI How to add done button to pickerSwiftUI 如何将完成按钮添加到选择器
【发布时间】：2020-05-16 08:03:58
【问题描述】：

我制作了一个只有一个按钮和一个选择器的迷你应用程序，我的想法是在选择器上方有一个完成按钮，所以一旦我选择了一个值，我可以按下完成，选择器将关闭。

我知道，如果您单击“单击我”按钮，它将打开，如果您再次单击它，则关闭选择器，但我正在寻找一个与选择器一起出现并在单击时随点击器消失的按钮。

几乎就像选择器上方带有完成按钮的工具栏

    @State var expand = false
    @State var list = ["value1", "value2", "value3"]
    @State var index = 0

    var body: some View {
       VStack {
            Button(action: {
                self.expand.toggle()
            }) {
                Text("Click me \(list[index])")
            }
            if expand {
                Picker(selection: $list, label: EmptyView()) {
                    ForEach(0 ..< list.count) {
                        Text(self.list[$0]).tag($0)
                    }
                }.labelsHidden()
            }

        }

第三张图片是我想要完成的，前两张是我目前得到的

感谢您的帮助

【问题讨论】：

标签： xcode swiftui ios13 picker swift5

【解决方案1】：

在 if 子句中添加一个按钮：

if expand {
    VStack{
        Button(action:{self.expand = false}){
            Text("Done")
        }
        Picker(selection: $list, label: EmptyView()) {
            ForEach(0 ..< list.count) {
                Text(self.list[$0]).tag($0)
            }
        }.labelsHidden()
    }
}

【讨论】：

这比公认的答案要好得多，因为它更简洁，更容易修改和制作自己的答案。谢谢@simibac

【解决方案2】：

这是我将如何做到这一点的一种方法......当然调整仍然是可能的（动画，矩形等），但想法的方向应该是明确的

结果演示：

代码：

struct ContentView: View {
    @State var expand = false
    @State var list = ["value1", "value2", "value3"]
    @State var index = 0

    var body: some View {
       VStack {
            Button(action: {
                self.expand.toggle()
            }) {
                Text("Click me \(list[index])")
            }
            if expand {
                Picker(selection: $index, label: EmptyView()) {
                    ForEach(0 ..< list.count) {
                        Text(self.list[$0]).tag($0)
                    }
                }.labelsHidden()
                .overlay(
                    GeometryReader { gp in
                        VStack {
                            Button(action: {
                                self.expand.toggle()
                            }) {
                                Text("Done")
                                    .font(.system(size: 42))
                                    .foregroundColor(.red)
                                    .padding(.vertical)
                                    .frame(width: gp.size.width)
                            }.background(Color.white)
                            Spacer()
                        }
                        .frame(width: gp.size.width, height: gp.size.height - 12)
                        .border(Color.black, width: 8)
                    }
                )
            }

        }
    }
}

【讨论】：

这个答案真的很冗长。为什么需要 GeometryReader 来实现这一点？

【解决方案3】：

这也可行（尤其是如果你在 Vstack 之外进行）...

   // Toolbar for "Done"
    func createToolbar() {
        let toolBar = UIToolbar()
        toolBar.sizeToFit()

        // "Done" Button for Toolbar on Picker View
        let doneButton = UIBarButtonItem(title: "Done", style: .plain, target: 
       self, action: #selector(PageOneViewController.dismissKeyboard))

        toolBar.setItems([doneButton], animated: false)
        toolBar.isUserInteractionEnabled = true

        // Makes Toolbar Work for Text Fields
        familyPlansText.inputAccessoryView = toolBar
        kidsOptionText.inputAccessoryView = toolBar
        ethnicityText.inputAccessoryView = toolBar
        }

并确保调用 createToolbar() 并完成！

【讨论】：

【解决方案4】：

struct ContentView: View {
    var colors = ["Red", "Green", "Blue"]
    @State private var selectedColor = 0

    var body: some View {
        NavigationView {
            Form {
                Section {
                    Picker(selection: $selectedColor, label: Text("Color")) {
                        ForEach(0 ..< colors.count) {
                            Text(self.colors[$0])
                        }
                    }
                }
            }
        }
    }
}

这有一些特定于表单的选择器行为，它可以内联打开而无需隐藏按钮。

【讨论】：