一个基于 SwiftUI 的自定义表单卡片，可在 iOS 应用程序中重复使用。
如果您想学习如何构建此类组件，请尝试以下教程。
- 表单卡片内可自定义的项目
- 字体可以更改
- 前景色和背景色可以更改
- 非焦点区域使用透明黑色标记
- 点击非焦点区域或其他区域将隐藏表单
将此 Swift 包添加到您的项目中
https://github.com/mahmudahsan/SwiftUI-Action-Sheet-Card
import SwiftUI
import ActionSheetCard
struct ContentView: View {
@State var showingSheet = false
var content: some View {
VStack {
Text("Custom Sheet")
.font(.largeTitle)
.padding()
Button(action: {
showingSheet = true
}) {
Text("Open Sheet")
}
}
.edgesIgnoringSafeArea(.all)
}
var sheetView: some View {
ActionSheetCard(isShowing: $showingSheet,
items: [
ActionSheetCardItem(sfSymbolName: "play", label: "Play") {
print("Play Tapped")
showingSheet = false
},
ActionSheetCardItem(sfSymbolName: "stop", label: "Stop", foregrounColor: Color.red) {
print("Stop Tapped")
showingSheet = false
},
ActionSheetCardItem(sfSymbolName: "record.circle", label: "Record")
])
}
var body: some View {
ZStack {
content
sheetView
}
}
}
- 在您的 SwiftUI 视图中添加
import ActionSheetCard - 定义一个
@State var showingSheet = false状态 - 创建表单视图并将状态作为绑定传递，并为表单定义一些项目
ActionSheetCard(isShowing: $showingSheet,
items: [
ActionSheetCardItem(sfSymbolName: "play", label: "Play") {
print("Play Tapped")
showingSheet = false
},
ActionSheetCardItem(sfSymbolName: "stop", label: "Stop", foregrounColor: Color.red) {
print("Stop Tapped")
showingSheet = false
},
ActionSheetCardItem(sfSymbolName: "record.circle", label: "Record")
])
- 传递一个回调来定义项目，这样当项目被点击时，回调将执行
ActionSheetCardItem(sfSymbolName: "stop", label: "Stop", foregrounColor: Color.red) {
// Callback
print("Stop Tapped")
showingSheet = false
}
- 如果没有回调，该项目将处于非活动状态
// No Callback
ActionSheetCardItem(sfSymbolName: "record.circle", label: "Record")
- 在您的主视图中的
ZStack中使用表单，否则黑色背景视图将无法正确显示
var body: some View {
ZStack {
content
sheetView
}
}
有关更多示例，请打开 /Demo/Demo.xcodeproj
- 如何更改表单项目的颜色和字体
// If font and color is not provide, default values will be used
ActionSheetCardItem(
label: "Stop",
sfSymbolName: "stop",
labelFont: Font.largeTitle,
foregrounColor: Color.red,
foregroundInactiveColor: Color.gray
) {
print("Stop Tapped")
showingSheet = false
},
- 如何更改表单卡片的背景颜色
ActionSheetCard(
isShowing: $showingSheet,
items: [],
backgroundColor: Color.red
)
- 请随时提出问题
- 在 Twitter 上 @mahmudahsan 找到我
- 在 Thinkdiff.net 上阅读编程文章