How to use Popover modifier in SwiftUI | Bootcamp #69

Summary

在这段视频中，Nick介绍了Swift UI中的一个新特性——弹出框（Popover）。他首先提到了之前发布的一些高级视频，然后决定转换话题，探讨一些相对简单的Swift UI特性，特别是iOS 17中的新特性或之前未覆盖的内容。Nick通过创建一个简单的屏幕，使用ZStack和Button，展示了如何使用Popover修饰符。他解释了Popover如何基于当前屏幕上的内容显示，并提供了一个交互式的示例，展示了如何通过点击按钮触发Popover的弹出。接着，他讨论了Presentation Compact Adaptation修饰符，这是iOS 16.4及以上版本中的一个新特性，它允许开发者根据不同的屏幕尺寸自定义Popover的显示方式。Nick还演示了如何通过调整Popover的附着点（Attachment Anchor）来改变其在屏幕上的位置，同时强调了Apple在确保Popover在屏幕上正确显示方面所做的努力。最后，他通过一个实际的例子，展示了如何在应用程序中使用Popover来收集用户的反馈选项。整个视频以简洁明了的方式介绍了Popover的使用，展示了其在提供用户界面交互时的便利性和强大功能。

Takeaways

• 🚀 Swift UI 17引入了新的modifier——popover，它允许在屏幕上当前内容的上方显示内容，非常适合用于提示信息框或弹出菜单。
• 📚 Nick提到，尽管之前已经讨论过sheets，但这次将专注于使用Swift UI原生的popover。
• 🔄 popover的使用方式与sheets或full screen cover类似，但需要添加一个新的modifier——presentation compact adaptation。
• 📱 在iOS 16.4或更新版本中，presentation compact adaptation才可用，因此需要确保项目设置为支持iOS 16.4。
• 📍 popover的内容会基于放置modifier的视图出现，这意味着popover会显示在它被放置的视图的正上方。
• 🔧 可以通过popover的attachment anchor来自定义popover出现的位置，但popover的实际显示位置由Apple的逻辑决定，以确保其在屏幕上可见。
• 🎨 使用popover时，可以自定义其arrow edge，但在iOS上通常不需要设置，因为arrow edge主要用在Mac OS上。
• 📘 popover提供了一个内置的dismissal UX，用户可以通过点击屏幕上的任何地方来关闭popover。
• 🔖 popover的内容非常简单，可以快速绑定布尔值来控制其显示和隐藏。
• 📊 Nick通过一个实际例子展示了如何使用popover来创建一个反馈选项的弹出窗口，其中包含了不同的emoji表情符号。
• 📈 popover的使用简化了在Swift UI中实现弹出内容的复杂性，提供了一种更简洁、更用户友好的交互方式。
• 🔗 如果需要更多的自定义选项，可以预见未来Swift UI可能会更多地使用popover，而不是sheets或full screen cover。

Q & A

Swift UI中的Popover是一个什么样的组件？

Popover是Swift UI中用于在屏幕上显示内容的一个组件，它可以显示在当前内容的上方，类似于一个弹出窗口，非常适合用于提示信息框、菜单等。

在Swift UI中，如何创建一个Popover？

在Swift UI中，创建Popover需要使用`presentation`修饰符，并绑定到一个布尔值来控制其显示与隐藏。内容部分可以是任何Swift UI视图。

如何改变Popover在屏幕上的位置？

改变Popover的位置可以通过设置`attachment anchor`参数来实现，它可以指定Popover相对于触发它的视图的位置，如顶部、底部、中心等。

Popover和Sheet在Swift UI中有什么区别？

Popover和Sheet在Swift UI中都是用于模态展示的组件，但Popover更倾向于显示在触发它的特定视图上方，而Sheet则是从屏幕底部弹出的内容。

在iOS 16.4之前的版本中，可以使用Popover特性吗？

Popover特性需要iOS 16.4或更新的版本支持。如果项目设置的最低iOS版本低于16.4，将无法使用Popover，需要更新Xcode到支持的版本。

如何让Popover在用户点击屏幕的任何地方时都能被关闭？

Popover默认具有点击外部区域关闭的行为，这是Apple提供的一个内置功能，无需开发者额外编写代码。

Swift UI中的`presentation compact adaptation`修饰符是做什么用的？

`presentation compact adaptation`修饰符用于自定义Popover在不同尺寸设备上的展示方式，可以指定Popover在水平或垂直紧凑尺寸类别下的展示效果。

在Swift UI中，Popover的箭头方向（Arrow Edge）如何影响其展示？

在iOS上，`Arrow Edge`并不影响Popover的展示，因为箭头方向主要用于MacOS系统。在iOS上，Popover的方向和位置完全由`attachment anchor`决定。

如何让Popover在屏幕上的特定视图上显示？

将Popover修饰符直接添加到需要触发Popover的视图上，Popover将会出现在该视图的上方或指定的`attachment anchor`位置。

在Swift UI中，Popover的使用场景有哪些？

Popover适用于显示提示信息、选项菜单、快速操作等场景，特别是当需要在不离开当前视图的情况下向用户提供信息或选项时。

如何在Swift UI中实现一个带有多个选项的Popover？

可以使用`ForEach`循环来遍历选项数组，并为每个选项创建一个按钮，然后将这些按钮放置在Popover的内容视图中。如果选项较多，还可以将内容包裹在`ScrollView`中。

Swift UI中的Popover是否支持在横屏和竖屏模式下有不同的展示效果？

是的，通过`presentation compact adaptation`修饰符，可以为横屏和竖屏模式设置不同的展示效果，以适应不同方向下的屏幕尺寸。

Outlines

00:00

😀 Swift UI 高级学习回顾与新内容预告

Nick 欢迎观众回到 Swift UI 高级学习频道，提到之前发布的视频内容非常高级和复杂。他认为现在是时候转换一下，从困难的内容中休息一下，开始探讨一些尚未在频道中介绍的更简单的主题。接下来的视频将涉及 iOS 17 中的新内容或者之前未覆盖的内容。Nick 强调这些内容并非 Swift UI 应用开发的核心基础，因此他计划快速通过这些主题，视频时长控制在 10 到 15 分钟左右。首个视频将讨论一个他很少使用的新的修饰符——popover，它用于在屏幕上显示当前内容之上的某些信息。

05:02

📱 Popover 修饰符的介绍和使用

Nick 介绍了 popover 修饰符，这是一个在屏幕上显示内容的新的 Swift UI 特性。他解释了如何使用这个修饰符，并指出它与 sheets 和 full screen cover 类似，但具有不同的呈现方式。通过使用 presentation compact adaptation 修饰符，可以控制 popover 的显示方式，以适应不同的设备尺寸。他还提到，从技术上讲，sheet 和 full screen cover 可以视为 popover 的一种形式，并通过改变一个小的枚举值来自定义显示方式。Nick 通过一个实际的例子展示了如何使用 popover，包括如何自定义其出现位置以及如何利用系统提供的逻辑确保 popover 在屏幕上的正确位置显示。

10:02

🔍 Popover 的自定义和屏幕适配

Nick 继续探讨 popover 的自定义选项，特别是 attachment anchor 和 arrow edge 的使用。他指出，在 iOS 上 arrow edge 不会产生任何效果，因此主要关注 attachment anchor 的自定义。通过改变 attachment anchor 的位置，可以控制 popover 相对于触发它的按钮的出现位置。他还提到了苹果公司如何通过智能逻辑确保 popover 在屏幕上的正确显示，即使在屏幕边缘的按钮上触发 popover，它也会在屏幕上可见的区域内显示。

15:04

💡 实际应用中 popover 的使用示例

Nick 通过一个实际的应用示例，展示了如何使用 popover 来创建一个简单的用户反馈界面。他创建了一个包含不同反馈选项的数组，并在 popover 中为每个选项设置了一个按钮。通过这种方式，用户可以方便地选择他们的反馈，而不需要离开当前屏幕或进入一个新的屏幕。他还提到，如果选项较多，可以将这些按钮放入一个滚动视图中，以便用户可以滚动查看所有选项。最后，Nick 强调了 popover 的易用性和强大功能，并鼓励开发者在应用中使用它来提供更好的用户体验。

Keywords

💡Swift UI

Swift UI 是苹果公司开发的一种用于创建用户界面的框架，它允许开发者使用Swift语言以声明式的方式构建iOS、iPadOS、macOS、tvOS和watchOS应用的界面。在视频中，Swift UI 作为主要的开发环境，被用来展示如何实现和使用新的界面元素，如 popover。

💡Popover

Popover 是一种用户界面元素，用于在屏幕上显示临时的、浮动的窗口，通常用来显示菜单、提示信息或其他内容。在视频中，popover 被用作一种新的modifier，允许开发者在Swift UI中以一种简单且灵活的方式展示内容。

💡Presentation Adaptation

Presentation Adaptation 是Swift UI中的一个功能，它允许开发者根据不同的设备尺寸和方向来调整弹出内容的展示方式。在视频中，通过使用presentation compact adaptation，可以使得popover在不同设备上有更好的适应性和用户体验。

💡Attachment Anchor

Attachment Anchor 是popover的一个属性，它定义了popover相对于其附着点的位置。在视频中，通过调整attachment anchor，可以控制popover相对于触发它的按钮或视图的位置，从而实现不同的展示效果。

💡Sheet

Sheet 是Swift UI中的另一种弹出式界面元素，通常用于展示模态视图。在视频中，sheet与popover进行了比较，说明了它们在展示方式上的区别，以及如何通过presentation compact adaptation来实现popover的效果。

💡Modifiers

Modifiers 是Swift UI中用于修改视图行为和外观的工具。在视频中，modifiers被用来实现popover的展示，包括如何绑定状态、如何设置popover的呈现方式等。

💡State

State 在Swift UI中指的是状态，它允许视图持有并管理数据。在视频中，使用@State private var来定义了一个控制popover显示与隐藏的布尔值状态。

💡Feedback Options

在视频中，feedback options 是一个示例，用来展示如何使用popover来创建一个用户反馈界面。这个界面允许用户通过点击不同的emoji按钮来选择他们的反馈选项。

💡Customization

Customization 在视频中指的是对用户界面元素进行个性化设置的能力。对于popover，可以通过调整attachment anchor和使用不同的modifiers来定制其外观和行为，以适应不同的使用场景。

💡UX (User Experience)

UX 指的是用户体验，它是衡量产品或服务如何满足用户需求和期望的指标。在视频中，通过使用popover和其dismissal特性（点击屏幕任意位置可关闭popover），提供了一个流畅且直观的用户体验。

💡Dismissal

Dismissal 是指用户界面元素的关闭或消失行为。在视频中，popover的dismissal特性被提及，用户可以通过点击popover外部的屏幕区域来关闭它，这是一种提升用户体验的设计。

Highlights

Nick介绍了Swift UI的新特性，即弹出窗口（Popover）

Popover用于在屏幕上显示内容，可以覆盖当前内容

Popover适用于展示提示信息框、菜单等

Nick计划在接下来的视频中介绍iOS 17中的新特性或尚未涉及的内容

Swift UI的Popover功能允许开发者快速简单地实现弹出窗口效果

Popover与Sheet和FullScreenCover类似，但提供了更灵活的展示方式

使用`presentation: .compactAdaptation()`可以调整Popover的展示方式

Popover的锚点（attachment anchor）可以自定义，以适应不同位置的展示需求

Apple为Popover提供了智能的屏幕适配逻辑，确保内容始终在屏幕上可见

Nick通过一个简单的示例展示了如何使用Popover创建一个反馈选项菜单

Popover提供了一种比传统的Sheet更简洁、更快速的交互方式

通过Popover，开发者可以轻松实现在不同设备上的良好用户体验

Nick预测Popover将成为Swift UI中越来越常用的特性

Popover的实现简单，与Swift UI的其他功能保持一致，易于开发者上手

Nick鼓励观众订阅频道，以便不错过后续的Swift UI教程

视频最后，Nick总结了Popover的优势，并鼓励在适当的情况下使用它

Transcripts

welcome back everybody my name is Nick

this is swiftel thinking and if you are

up to date on this channel you know that

the last bunch of videos that I posted

were in the Swift UI Advanced learning

playlist they were really Advanced

complex topics some of those videos got

really long and really difficult so I

think it's a good time now to maybe

switch gears and maybe take a break from

the hard stuff and look at some of the

easier things that I have not yet

covered on this channel so the next

couple videos are going to be things

that are either new to iOS and iOS 17 or

things that I just haven't covered yet a

lot of these things are not really core

and foundational to building Swift UI

apps so I'm going to try to move a

little quickly here and keep these

videos shorter maybe like 10 to 15

minute Mark something in there this

first video we're going to discuss a new

modifier that I have very rarely used on

this channel which is the popover this

is a great way to literally show

something on top of the current content

on the screen and literally have it pop

over your current content so this this

is great for maybe things like little

tips and info boxes maybe some popover

menus and things like that we're going

to look at all the different ways that

we can use the popover modifier and then

we're going to discuss a couple

different

implementations welcome back everybody

we are back here again in the Swift UI

boot camp playlist this is the original

playlist on this channel and I'm just

going to add a couple more videos here

again because Swift UI just keeps

getting better and we keep getting more

and more really cool features uh this

feature included I wish we had in the

original version of Swift UI but I am

thankful and happy that we have it at

least now so what we're going to cover

is called a popover and before we begin

I just want to throw out there that

earlier in this series we did a what I

called a popover boot camp and in that

video we used sheets and made our own

custom popovers but going forward if we

refer to something as a popover I guess

we should use the native Swift UI

version of the popover so you can call

these modal transitions or sheets that

we discussed earlier what we're going to

do in this video is what I will actually

call a popover going forward so let's

right click the Navigator create a new

file it'll be a swift UI View and let's

call this native

popover boot

camp let's click create let's jump

inside and I'm just going to close the

navigator quick and make the text a

little bigger so that you guys can see

it and this should be a really easy one

because a lot of the code is very very

similar to a lot of the other Swift UI

modifiers that we've already learned so

let's start this one with a super simple

screen I'm going to make a zstack here

and on the background let's do color.

gray. ignore safe area and then above

that I'm just going to put a quick

button the button will say something

simple and let's click enter on the

action and the modifier we're going to

look at in this video is actually called

hop over there are two completions here

this one is binding to an identifiable

and this one is binding to and is

presented this works basically the same

way as sheet or full screen cover where

we we can bind to an item or bind to is

presented same thing as full screen

cover right we're just going to use

popover now so the the code should be

very very familiar to you guys we're

going to use the is presented because

it's a little easier to use for this

tutorial we're going to buy into a

Boolean so let's create an at

State private VAR let's call it show

popover of type bu set it equal to false

and then of course we need to bind to it

with the dollar sign show popover let's

click enter on the content and we're

going to keep the content super simple

for now let's just put a quick text here

that says maybe hello

subscribers and this will be a quick

friendly reminder that if you are

watching this playlist list and you're

not subscribed please hit that subscribe

button I think a large portion of you

are not subscribing but watching the

videos and as amazing that is really

does help me out if you could just hit

that button but whether or not you're

going to click that subscribe button

you're definitely going to click this

button here so in this button we should

put a little action that says show pop

over and maybe do toggle all right if I

click this let's see what happens and

boom we have a sheet pop up you're

probably wondering hey Nick we said

we're going to look at popovers but this

looks like a sheet and we've already

covered sheets in this playlist and

you're absolutely correct and I was

super confused about this the first time

I did it as well why does a popover look

like a

sheet well it turns out there's another

modifier that we need to use here and

it's called

presentation compact

adaptation and let's type in here and

there's two completions here this one

allows you to customize the presentation

for horizontally or vertically compact

Siz classes so if you're using like a

larger or smaller device that's

horizontal or vertical you can customize

the adaptation but in this video we're

just going to use a simple compact

adaptation just for a universal

adaptation for all devices I think it's

probably much more common um unless

you're really customizing your app for

different device sizes if I click the

period here we're going to see there's a

couple completions and it turns out that

sheet is one of the adaptations that we

can use same with full screen cover and

then of course we have our new one which

is popover so let's click do sheet here

just because we already saw what the

sheet looks like when I do that we're

going to get a quick error message of

course presentation compact adaptation

is only available in iOS 16.4 or newer

I'm not going to deal with versioning in

this video so let's just go ahead and

change our project go to the Navigator

and make our project compile for iOS 16

16.4 if you don't have 16.4 here you're

probably using an older version of xcode

so go ahead and update your xcode to a

newer version that supports

16.4 let's jump back into our code and

let's look at what the sheet looks like

click me this is our typical sheet we

can also do full screen

cover and then we can also do the new

popover now this is basically what we're

really focused on in this video this is

a cool little pop over that occurs right

on The View where we put the modifier

and this is important so when we use the

the sheet right that sheet is coming up

from basically anywhere on this screen

that Sheet's going to come up from the

bottom right if we put this code down

here on the entire

zstack the Sheet's going to look the

exact same but when we use popover that

popover is going to appear right on top

of the view that it is drawn on so right

now this popover is on this entire

zstack we know this zstack is full

screen because it's the entire gray area

so if I click it you're probably going

to wonder where on Earth is the popover

happening right it clicks it but you

can't really tell if you look really

closely up here I'll try to zoom in here

there's a little shadow that appears in

this top

corner it's really hard to see but

basically this popover right now is

appearing the anchor for the popover is

in the top left corner of the entire

zstack and so obviously that's not a

great

look but all we need to know is this

popover is going to appear on The View

that we're putting it on so if I move it

and I put it on the button here then

it's going to appear right on top of the

button which is exactly what we want

here before we move forward I do just

want to throw out here that this very

well may be the way that we start

showing actual sheets and fulls screen

covers in Swift UI so right now if I use

the sheet modifier or the full screen

cover modifier that's going to do more

or less the exact same thing as a

popover with the sheet adaptation and my

guess is this is probably Apple subtly

hinting to us that this is the direction

that this framework might go and

honestly in the long run it's probably

going to be better because now we can

customize which of those presentations

we want just by changing this little

enome here right so now I don't need to

add a sheet and a full screen cover and

a popover modifier I can just add this

one popover and then just change what

adaptation that I want here so kind of

is going to open us up to basically

being able to customize all of that much

easier than we currently have apple has

not officially said that but that's just

my guess like otherwise I'm not really

sure why they would put sheets inside

this adaptation here we're probably

going to start using Popo over more and

more going forward anyway let's look

again at the popover what we're really

focused on in this video so the rest

this video is just going to be playing

around with the popover and maybe some

of the different ways we can actually

implement this now if I hold the option

button and click on the popover modifier

we can read a little bit of the

documentation here and you're going to

notice that in the complete function

there is an attachment anchor as well as

an arrow Edge and I'm come down here and

read the attachment anchor

is the positioning anchor that defines

the attachment point of the popover so

this is basically on the button where is

the popover going to appear on top

of and then we have Arrow Edge and if I

read this it says the attachment anchor

that defines the location in Mac OS so

if we are not building for Mac OS which

we are not right now the arrow Edge is

not going to do anything so we're just

going to play around with the attachment

anchor real quick so let's go ahead and

call popover again this time I'll hold

the option button and click enter so we

can get the actual completion here let's

bind to show pop over and then for the

attachment anchor I'm going to press the

period and we can look at either a point

or a rect a rect would be we're going to

tell it the exact coordinates of where

to appear but I think point is probably

much easier to use much more common so

let's go with that and let's. Center for

now the arrow Edge we just discussed is

not needed on iOS and then content let's

click enter and just put our content

back in this one and we will delete the

old version here cool and on this button

really quickly let's just add a little

bit of padding and then maybe a

background of color. yellow just so that

I can see this Square let's make it

maybe

20 and again remember this popover is

being drawn on top of the view that it

is on so right now the pop pop over is

on what looks like the yellow Square on

the screen so if the attachment anchor

is the center of that

popover we can see this little arrow

appearing right in the center of the

view that it is on if I move this to

maybe the top leading it's going to

appear right in the top left corner of

the view that is on and this is really

cool super customizable so we can really

customize how we want it to appear I

think most of the time we probably want

the popover to avoid

the button that we are clicking on so if

it's in the center it kind of covers up

the text maybe that's what you want I

would probably prefer top to the actual

button

Edge we could also move it to the bottom

and now it's going to basically fully

cover the button which I definitely do

not like one thing I one thing I will

point out here though is that the

popover has this awesome dismissal that

if you click anywhere on the screen

it'll dismiss that popover and I think

that's a really great ux that Apple's

giv us out of the box but generally I

don't want my pop over to cover my

button like this so we can move it back

to

top now of course we can customize this

attachment anchor but we can't actually

customize where the popover is actually

going to appear so you'll notice right

now the anchor is at the top and then

the popover is appearing above that

anchor and if I move it to the bottom

the now the anchor is at the bottom but

the popover is still appearing on top of

that anchor right so we can't actually

customize where the popover is going to

appear we can just customize the anchor

at this time and you're probably

wondering well that's a pretty bad ux

why would Apple do that and that's

because apple is including the logic to

make sure that the popover appears

within the screen itself so this is

actually a benefit for us as developers

so for example if I put this button in a

vstack and then maybe I push the button

to the top of the

screen put a spacer in the bottom of the

vstack if we click it now you'll notice

the anchor is at the top but the actual

popover is showing up below the

anchor and that's because if the popover

were to appear above the anchor it would

be off screen and you just wouldn't be

able to actually use it so Apple's

actually customizing the logic to make

sure that this popover is appearing on

the screen which is super handy so

generally speaking if the view that the

popover is appearing on is towards the

top of the screen

like this my Anchor Point will probably

be on the

bottom but if it is at the bottom of the

screen so if I put the spacer at the top

and it's moved to the bottom of the

screen my Anchor Point is probably going

to be closer to the top all right and

let's wrap this up with just maybe a

real world example of when we might want

to use some little popover like this so

let's do an at State at State private

bar let's say feedback options of type

making an array of string we'll set it

equal to an array here and let's just

say maybe very good with a little Emoji

because users love

emojis let's do maybe

average with another Emoji here maybe a

little less happy just a little smiley

face and then let's do maybe very bad

and we'll do a little angry user face

here and let's put these feedback

options on the screen in this pop over

here let's change out this text let's

make it maybe a vstack let's make it

alignment leading spacing maybe 12 and

we'll do a for each in here for each of

the feedback options which is an array

of string and strings are hashable so

the ID that we want to loop on is the

hash value of the string

itself so dot self is the hash value of

the string just a quick reminder click

enter here this will be for each option

in the feedback options and now we're

going to put another text on the screen

that just has the

option cool let's click it see where

we're at all right let's maybe make each

of these a button instead that has the

option as the title and let's add a

divider to each of these so let's click

it again looking a little better we

don't need the divider down below the

bottom one so let's just say if option

is is not equal to the feedback options.

last then we'll put the divider on the

screen and I want to add some padding

outside of this entire popover so let's

just add maybe some padding on the

vstack let's do maybe

20 and this is looking much

better let's change the clickme to maybe

provide

feedback and now we have a super simple

feedback popover in our app and if we

had a lot of options we could even go

ahead and put this inside like a scroll

View and then we can have this awesome

scroll view inside here with a whole

bunch of options so I love this popover

modifier just because a it's very easy

to use it's using basically the same

logic that we already know and love in

Swift UI these super simple

bindings all right so just wrapping up

here before we end the video this

popover the way to use it is basically

the same way that we use a sheet or full

screen cover like except we just have to

add this new modifier here presentation

compact adaptation a reminder that we

can customize the adaptation for

horizontal or vertical if we want so I'm

just going to use popover on both of

these just so we have the code

here and that's it for this video just a

quick one on how to use popover I think

this is super powerful I'm going to be

using this a lot in my apps I mean prior

to this if you wanted to show a model

like this it would require a lot of

custom code and probably be not be as

smooth and seamless as this native

version right I can click anywhere on

the screen to dismiss the popup and that

is awesome and the popup is going to

appear based based on where the button

is on the screen so we saw when the

button was at the top of the screen the

popover appeared below the button now

it's appearing on top of the button

because it's at the bottom of the screen

this is just a really good ux this is

much better than having like segue to a

new screen or show this big sheet right

we can still show Sheets if if we want

to but this is much more

janky than just showing a quick little

popover and I would say if you were just

showing a little bit of code maybe a

couple buttons maybe just a small little

tip for the user this is a perfect way

to do it anyway I hope you guys enjoyed

the video as always my name is Nick this

is swiftel thinking do not forget to hit

the Subscribe button and I will see you

in the next

video

[Music]