.toolbar {} 中的 ToolbarItemGroup 在 Sheet 中无效

Question

我正在使用SwiftUI 3.0、Swift 5.5和Xcode 13.2进行开发，在iOS 15.3的iPhone设备和iOS 15.2的iPhone模拟器上进行了测试。

我已经测试了以下内容：

这是一个视图，带有一个文本字段、一个聚焦状态和一个.toolbar。

import SwiftUI

struct test: View {
    @State private var name = "Taylor Swift"
    @FocusState var isInputActive: Bool
    
    var body: some View {
        TextField("Enter your name", text: $name)
            .textFieldStyle(.roundedBorder)
            .focused($isInputActive)
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()

                    Button(name) {
                        isInputActive = false
                    }
                }
            }
    }
}

struct test_Previews: PreviewProvider {
    static var previews: some View {
        test()
    }
}

它像预期的那样完美地工作，并显示一个按钮，其中包含在TextField中输入的任何文本。

然后，当它在一个sheet中显示时，虽然是相同的代码，但没有工具栏。这是sheet的示例：

import SwiftUI

struct test: View {
    @State private var name = "Taylor Swift"
    @FocusState var isInputActive: Bool
    @State var isSheetPresented: Bool = false
    
    var body: some View {
        VStack {
            Button {
                self.isSheetPresented = true
            } label: {
                Text("Open Sheet")
            }
        }
        .sheet(isPresented: $isSheetPresented) {
            TextField("Enter your name", text: $name)
                .textFieldStyle(.roundedBorder)
                .focused($isInputActive)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()

                        Button(name) {
                            isInputActive = false
                        }
                    }
                }
        }
    }
}

struct test_Previews: PreviewProvider {
    static var previews: some View {
        test()
    }
}

- Meers E. Chahine

---

仍然面临着与iOS17相同的问题。您是否有一个使用sheet的可行示例？将TextField与NavigationView包围，并将sheet更改为fullScreenCover似乎可以解决问题，但这并不总是可接受的解决方法。 - undefined

Answer 1

工具栏需要一个

NavigationView

还有一个在顶层的。围绕着文本字段。

- lorem ipsum

---

它没有这个也能工作，为什么呢？你是说它只需要在表格中才需要吗？ - Meers E. Chahine

@MeersE.Chahine，您可能在项目的根目录下有一个 NavigationView。当您转到 .sheet 时，您需要另一个导航视图，否则它不会传递过去。工具栏通过将对象放在导航栏上来工作。.keyboard 的位置有点问题，所以如果您没有看到一致的结果，那可能是一个 bug。 - lorem ipsum

Answer 2

今天我也遇到了同样的问题。在阅读了这个问题后，我花了很多时间才最终找到了解决方案。我想在键盘上放置一个“完成”按钮，以便在编辑完成后关闭它，我使用了ToolbarItem(placement: .keyboard)。

在我的情况下，我错误地在不同的位置放置了多个.toolbar()，导致我的表格中的“完成”按钮变为禁用状态，就像这样（在模拟器中）：

为了解决问题，请不要做这个：

struct SettingsView: View {
    var body: some View {
        NavigationView {
            Form {
                // Some other codes..
            }.navigationBarTitle("Settings", displayMode: .large).toolbar() { // <--- This one is a .toolbar()
            ToolbarItem{
                Button("Cancel"){
                    self.mode.wrappedValue.dismiss()
                }
            }}
        }.toolbar { // <--- This one another .toolbar() (-_-")
            ToolbarItem(placement: .keyboard) { // <--- This one is in the WRONG place!
                Button("Done") {
                    focusedField = nil
                }
            }
        }
    }
}

相反，执行以下操作：

struct SettingsView: View {
    var body: some View {
        NavigationView {
            Form {
                // Some other codes..
            }.navigationBarTitle("Settings", displayMode: .large).toolbar() { // Make it into a single .toolbar() 
                ToolbarItem{
                    Button("Cancel"){
                        self.mode.wrappedValue.dismiss()
                    }
                }
                ToolbarItem(placement: .keyboard) {
                    Button("Done") {
                        focusedField = nil
                    }
                }
            }
        }
    }
}

希望能有所帮助。

- yunhasnawa