如何设置 SwiftUI 工具栏显示在视图中央

Question

我正在我的视图中的各个位置尝试 SwiftUI ToolbarItem，例如在底部栏和导航中。我想知道是否可以将 ToolBarItem 在视图中垂直居中，而不是顶部或底部。设置 ToolBarItem 的放置时，我没有看到用于居中的放置属性。知道这个 ToolBarItem 如何在视图中居中吗？

这是我的 ToolBarItem 代码，当前设置为 .bottomBar：

struct ContentView: View {
    @State private var cityName = ""
        
    var body: some View {
        NavigationView {
            VStack() {
                //some content
            }.navigationTitle("Weather")
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    HStack {
                        TextField("Enter City Name", text: $cityName)
                            .frame(minWidth: 100, idealWidth: 150, maxWidth: 240, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
                        Spacer()
                        Button(action: {
                            // some action
                        }) {
                            HStack {
                                Image(systemName: "plus")
                                    .font(.title)
                            }
                            .padding(15)
                            .foregroundColor(.white)
                            .background(Color.green)
                            .cornerRadius(40)
                        }
                    }
                }
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

尝试这种方法将工具栏元素放置在

ContentView

的中间。

它应该看起来与您拥有的

.toolbar {...}

完全一样，并且其功能也完全符合您的预期。 这种方法的主要区别在于 您可以将工具栏放在您喜欢的任何位置。 您还可以使用

GeometryReader

在您的视图中进行非常精细的放置。

struct ContentView: View {
    @State private var cityName = ""
    
    var toolbar: some View {
        HStack {
            Spacer()
            TextField("Enter City Name", text: $cityName)
                .frame(minWidth: 100, idealWidth: 110, maxWidth: 140, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
            Spacer()
            Button(action: {}) {
                Image(systemName: "plus").font(.title)
                .padding(15)
                .foregroundColor(.white)
                .background(Color.green)
                .cornerRadius(40)
            }
            Spacer()
        }
    }
    
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                toolbar
                Spacer()
            }.navigationTitle("Weather")
        }
    }
}

Answer 2

将上面的代码放入工具栏（..）函数中：

    func toolbar(
    _ toolbar: NSToolbar,
    itemForItemIdentifier itemIdentifier: NSToolbarItem.Identifier,
    willBeInsertedIntoToolbar flag: Bool
  ) -> NSToolbarItem? {
    switch itemIdentifier {
    case .your_identifier:
      let toolbarItem: NSToolbarItem = NSToolbarItem(itemIdentifier: .your_identifier)
      toolbarItem.view = NSHostingView(rootView: YourView())
      toolbar.centeredItemIdentifiers = [.your_identifier]
      return toolbarItem 
   }
}