译自 Buttons and images
更多内容,欢迎关注公众号: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 显示原始的图像而不是着色后的版本。
译自 Showing alert messages
显示 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 = falsevar 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及计算机编程的相关文章,以及优秀国外文章翻译,欢迎关注~