Section 16 : Modal Presentation

- 模态展示（7’02"）

Navigate to another screen using a built-in Modal view.

使用内置的模态视图导航到另一个屏幕。

今天的内容非常少。模态显示我觉得就类似弹出框，浮在现有的窗口上面。

1. 为控制模态显示增加控制变量

@State var showUpdate = false

2. 添加显示模态框的按钮

打开 HomeView 文件，在 HStack中的 AvatarView 组件的后面添加按钮。

Button(action: {self.showUpdate.toggle()}) {
	Image(systemName: "bell")
        .renderingMode(.original)
        .font(.system(size: 16, weight: .medium))
        .frame(width: 36, height: 36)
        .background(Color.white)
        .clipShape(Circle())
        .shadow(color: Color.black.opacity(0.1), radius: 1, x: 0, y: 1)     // 小半径的边缘投影，突出边界
        .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 10)   // 大半径的范围投影，悬浮效果
}
.sheet(isPresented: $showUpdate) {
    ContentView()
}

sheet 修饰用来呼出模态框，这里模态框的内容暂时使用了 ContentView。在点击按钮后，showUpdate 值切换，会显示模态框。可以看到，模态框有很多内置的动画，还可以响应原本视图的手势，比如显示卡片的内容，但由于手势上的设置与内置的手势有重复（如拖拽），这部分就展示的不理想了。

今天的另一个收获是使用半径不同的阴影让按钮的效果更好一些。

本节小结

本节代码请参见 GitHub 和 码云

• 模态框是一种常见的展示方式，一般需要通过一个控制变量配合。
• 模态框有内置的手势、动画，无须过多设定。
• sheet 修饰器可以用来调用模态框。
• 使用双重阴影美化组件

接下来

导航视图