[SwiftUI 知识碎片] Debris-7 Button、Image 和 Alert在 SwiftUI 中，按钮可以

更多内容欢迎关注公众号：Swift花园

Button 和 Image

在 SwiftUI 中，按钮可以由两种方式创建，取决于它们的外观。

最简单的方式是创建一个只包含文本的按钮：你传入按钮的标题，并且提供一个闭包，这个闭包会在按钮被点击时执行：

Button("Tap me!") {
    print("Button was tapped")
}

如果你想要更多，比如一个图像或者视图的组合，你可以使用另外一种形式：

Button(action: {
    print("Button was tapped")
}) { 
    Text("Tap me!")
}

当你需要在按钮中配合图像，那么上面这种方式尤其场景。

SwiftUI 有一个专门的 Image 类型，用于处于 app 中的图片，并且有三种主要的创建方式：

Image("pencil") 会加载一个叫 “pencil” 的图片，它是你已经加入工程的图片。
Image(decorative: "pencil") 会加载相同的图片，但不会在你启用屏幕阅读的时候被读出来。这种方式在图像没有传递额外重要信息的时候很有用。
Image(systemName: "pencil") 会加载 iOS 内建的 pencil 图标。它用的是 Apple 的 SF Symbols 图标集，你可以从 Apple 的网站下载这个全集，在全集中浏览和搜索图标。

默认情况下，如果屏幕阅读启用，它会读出你的图片名称。因此你要确保图片名称清晰合理以免令用户困惑。或者，你也可以用 Image(decorative:) 构造器来明确这个名称不需要被读出来。

由于按钮的第二种形式支持包含任何类型的视图，你可以直接用一个图像：

Button(action: {
    print("Edit button was tapped")
}) { 
    Image(systemName: "pencil")
}

当然你也可以组合图像和文字：

Button(action: {
    print("Edit button was tapped")
}) {
    HStack(spacing: 10) { 
        Image(systemName: "pencil")
        Text("Edit")
    }
}

提示：如果你的图像被填充了某个颜色，比如一个纯蓝色。这可能是因为 SwiftUI 将它们着色以表明图像是可点击的。为了解决这个问题，你可以用renderingMode(.original) 修改器来强制 SwiftUI 显示原始的图像而不是着色后的版本。

显示 Alert 消息

如果某件重要的事情发生，一种常见的通知用户的方式是使用 alert – 这是一种包含标题，消息，一到两个按钮的弹出式窗口。

思考一下：什么时候 alert 应当被展示？如何展示？视图是状态的函数，alerts 也不例外。因此，与其说是“显示 alert”，不如说我们创建 alert 并且设置展示的条件。

一个基本的 SwiftUI alert 有标题，消息，和一个 dismiss 按钮，就像这样：

Alert(title: Text("Hello SwiftUI!"), message: Text("This is some detail message"), dismissButton: .default(Text("OK")))

如果你需要的话，可以添加更多代码来配置按钮的细节。更有趣的是，我们展示 alert 的方式：我们并不会把 alert 赋给某个变量然后调用 myAlert.show()这样的代码，因为这样就又回到了“事件序列”的思维方式。

取而代之的是，我们创建一个 alert 是否显示的状态，像这样：

@State private var showingAlert = false

然后，我们把 alert 附着在UI的某个地方，并且告诉它使用上面那个状态来决定是否呈现 alert。SwiftUI 会观察 showingAlert状态，只要它变成 true，就会展示 alert。

下面是演示代码，当按钮被点击时，显示 alert：

struct ContentView: View {
    @State private var showingAlert = false

    var body: some View {
        Button("Show Alert") {
            self.showingAlert = true
        }
        .alert(isPresented: $showingAlert) {
            Alert(title: Text("Hello SwiftUI!"), message: Text("This is some detail message"), dismissButton: .default(Text("OK")))
        }
    }
}

上面的代码是把 alert 依附在 button 上，不过实际上alert() 修改器被应用于哪里其实无所谓，我们所做的就是当 showingAlert 为真时展示 alert。

近距离检视一下alert() 修改器：

.alert(isPresented: $showingAlert)

这里又是一个双向绑定，因此当你关掉 alert 弹窗时 SwiftUI 会自动showingAlert 设置回 false。

我的公众号这里有Swift及计算机编程的相关文章，以及优秀国外文章翻译，欢迎关注～