Skip to main content

6、显示popovers

弹出框是一种可以显示在屏幕上以提供有关特定项目的更多信息的视图。它们包括一个箭头，指向它们起源的位置。你可以点击任何其他屏幕区域以关闭弹出窗口。弹出框通常用于较大的屏幕，例如 iPad。

本文，我们将在 iPad 上创建并显示一个弹出框。

Getting ready​

首先创建一个SwiftUI项目：DisplayingPopovers

How to do it​

  1. 首先定义一个State控制是否显示popover
@State private var showPopover = false
  1. 创建一个按钮，点击时显示Popover
var body: some View {
    Button("show popover") {
        self.showPopover = true
    }.popover(isPresented: $showPopover, arrowEdge: .bottom) {
        Text("Popover content displayed here")
            .font(.system(size: 40))
    }
}
  1. 预览切换成iPad，或者直接在iPad模拟器上运行
static var previews: some View {
      ContentView()
          .previewDevice("iPad Pro (9.7-inch)")
  }

008i3skNly1gy38aznqryj30o40xmdgp

How it works​

.popover()有4个参数：isPresented, attachmentAnchor, arrowEdge, 和 content.

isPresented控制是否显示。

attachmentAnchor设置弹窗锚点。

arrowEdge控制弹窗的小箭头方向。

content控制弹窗内容。