在SwiftUI中呈现其他视图的基础


呈现其他视图是Apple正式提供的Swift UI中基本视图的附加视图。
它通常被描述为模态的。
到目前为止，在UIKit中，我认为通过充分利用addSubView显示的其他视图将在此处汇总，因此我进行了查找。

SwiftUI --view

我认为主要用法是通过点击Twitter上的发布按钮显示的发布屏幕。

ダウンロード.gif

另外，我受到@H_Crane编写的SwiftUI速查表的启发，并对其进行了总结。

操作环境

  • Xcode 11.2.1
  • macOS Catalina版本10.15.2

4种呈现其他视图的类型

官方提供了四种类型的"呈现附加视图"。让我们逐步看一下它

  • 床单
  • 行动表
  • 警报
  • 弹窗

工作表

工作表是Presentation Additional View基础的最可定制的视图。
下面是在Swift UI中按Button时显示的示例。
名为Text("This is Sheet.")的部分是View的自定义内容，也可以调用此部分其他地方定义的View类。

1
2
3
4
5
6
7
    Button(action: {
        self.showSheet.toggle()
    }, label: {
        Text("AddSheet")
    }).sheet(isPresented: self.$showSheet, content: {
        Text("This is Sheet.")
    })

ダウンロード (1).gif

工作表正式版

动作表

ActionSheet是一个视图，可让用户从选项中进行选择。
在UIKit中，它是通过UIAlertController实现的。
由于该操作与UIAlertController几乎相同，因此似乎可以使用相同的胶水使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    Button(action: {
        self.showActionSheet.toggle()
    }, label: {
        Text("AddActionSheet")
    }).actionSheet(isPresented: self.$showActionSheet, content: {
        ActionSheet(title: Text("Action"),
            message: Text("Description"),
            buttons: [
                .default(Text("OK"), action: {

                }),
                .destructive(Text("Delete"), action: {

                })
            ]
        )
    })

ダウンロード (2).gif

ActionSheet官方

Alert

警报是一个通知用户消息的视图。
在UIKit中，它是通过UIAlertController实现的。
与ActionSheet一样，该操作与UIAlertController几乎相同，因此似乎可以与同一胶水一起使用。

1
2
3
4
5
6
7
    Button(action: {
        self.showAlert.toggle()
    }, label: {
        Text("AddAlert")
    }).alert(isPresented: self.$showAlert, content: {
        Alert(title: Text("Error"), message: Text("Error Reason"), dismissButton: .default(Text("OK")))
    })

ダウンロード (3).gif

警报官方

Popover

Popover是一个可以像Sheet一样自定义的View，但是我无法分辨出区别，当我运行并触摸它时，它的行为如下。
ダウンロード (4).gif

1
2
3
4
5
6
7
    Button(action: {
        self.showPopOver.toggle()
    }, label: {
        Text("AddPopOver")
    }).popover(isPresented: self.$showPopOver, attachmentAnchor: .rect(.bounds), arrowEdge: .leading, content: {
        Text("This is PopOver.")
    })

当我检查设计准则以找出View的用途时，我发现了以下表示法。

避免在iPhone上显示弹出窗口。通常应保留弹出窗口供iPad应用程序使用；在iPhone应用程序中，请通过在全屏模式视图中而不是在弹出窗口中显示信息来利用所有可用的屏幕空间。 ，请参见模态。

换句话说，它表示在iPad或Mac上查看。让我们使用Sheet。

设计准则--popover

概括

  • 如果要选择，则自定义为工作表/操作/消息使用警报
  • iPhone开发中未使用Popover

这次的示例代码位于下面。我将继续尝试研究的内容，因此，如果您能给我一颗星星，我将不胜感激??

SampleViewSwiftUI