NavigationTabBar 中的 SwiftUI 自定义弹出菜单

Question

我想在导航选项卡中创建一个类似菜单的自定义对话框，我将用它来在不同的视图选项之间切换。

我正在寻找的设计几乎正是苹果在提醒应用程序中所做的，点击分享按钮： 我还没有任何功能代码，因为我尝试的一切都失败了，而且我还没有在网上找到任何关于如何自定义这样的溢出的内容。我假设它应该是这样的：

NavigationView {
    // Content views
    .navigationTitle("Title")
    .toolbar {
        ToolbarItem(placement: .topBarTrailing) {
            Menu {
               // Probably the code I’m looking for but failed to accomplish
            } label: {
                Label("Text", systemImage: "ellipsis")
            }
        }
    }
}

Apple 在各种应用程序中通常对这些菜单有几种不同的设计。如何更好地控制这些菜单的外观？

Answer 1

经过对工具提示和弹出窗口的一些研究和实验，我想出了这个：

@State var viewOptionsIsShown = false
@State var selectedView: String = "list"

NavigationView {
      // Content

      .navigationTitle("Title")
      .navigationBarTitleDisplayMode(.inline)
      .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
                  Button {
                        viewOptionsIsShown.toggle()
                  } label: {
                        Label("Label", systemImage: "slider.horizontal.3")
                  }
                  .popover(isPresented: $viewOptionsIsShown, attachmentAnchor: .point(.bottom), arrowEdge: .bottom, content: {
                          PopoverOptions(selectedView: $selectedView)
                         .presentationCompactAdaptation(.popover)
                  })
            // Additional ToolbarItems
       }
}

toolbarItem 按钮切换

viewOptionsIsShown

Bool。问题的关键和答案是附加到按钮上的

.popover

修饰符。它绑定到同一个 Bool，带有一些显示参数。对于内容，调用一个单独的视图结构，

PopoverOptions

，并绑定到

selectedView

。该单独的视图可以根据您的喜好进行设计，在我的例子中，您可以在三个按钮之间进行切换，这三个按钮会返回

selectedView

的三个不同状态值。

注意

.presentationCompactAdaption

修饰符。默认情况下，较小的屏幕尺寸 (iPhone) 将显示工作表而不是弹出框。这会覆盖始终显示弹出窗口。

最终结果