1. ContextMenu 菜单栏的使用
1.1 实现
/// 菜单栏
struct ContextMenuBootcamp: View {
@State var backgroundColor: Color = Color.purple
var body: some View {
VStack(alignment: .leading, spacing: 10.0){
Image(systemName: "house.fill")
.font(.title)
Text("Swiftful Thinking")
.font(.headline)
Text("How to use Context")
.font(.subheadline)
}
.foregroundColor(.white)
.padding(30)
.background(backgroundColor.cornerRadius(13))
// menuItems: 系统默认的样式,不能进行更改,背景颜色,位置,字体都不能更改
.contextMenu {
Button {
backgroundColor = .yellow
} label: {
Label("Share post", systemImage: "flame.fill")
}
Button {
backgroundColor = .red
} label: {
Text("Report post")
}
Button {
backgroundColor = .green
} label: {
HStack{
Text("Like post")
Image(systemName: "heart.fill")
}
}
}
}
}
1.2 效果图:
2. TextField 文本输入框的使用
2.1 实现
/// 文本输入框
struct TextfieldBootcamp: View {
// 内容文本
@State var textFieldText: String = ""
// 数组
@State var dataArray:[String] = []
var body: some View {
NavigationView{
VStack {
// 文本输入框
TextField("Type something here...", text: $textFieldText)
//.textFieldStyle(.roundedBorder) // 添加边框
.padding()
.background(Color.gray.opacity(0.3).cornerRadius(10)) // 背景颜色 opacity: 透明度
.foregroundColor(.red)
.font(.headline)
// 按钮点击事件
Button {
if textIsAppropriate(){
saveText()
}
} label: {
Text("Save".uppercased())
.padding()
.frame(maxWidth: .infinity)
.foregroundColor(.white)
.background(textIsAppropriate() ? Color.blue : Color.gray)
.cornerRadius(10)
.font(.headline)
}
// 按钮是否可用
.disabled(!textIsAppropriate())
// 循环
ForEach(dataArray, id: \.self) { data in
Text(data)
}
Spacer()
}
.padding()
.navigationTitle("TextFiled")
}
}
/// 字符串检查
func textIsAppropriate() -> Bool {
// check text
if textFieldText.count >= 3{
return true
}
return false
}
// 保存文本
func saveText() {
dataArray.append(textFieldText)
textFieldText = ""
}
}
2.2 效果图:
3. TextEditor 文本编辑框的使用
3.1 实现
/// 编辑文本框
struct TextEditorBootcamp: View {
@State var textEditorText: String = "This is the starting text."
@State var savedText: String = ""
// 输入 #colorLiteral( 用于颜色或#imageLiteral( 用于图像,它会立即出现 自动提示
var body: some View {
NavigationView{
VStack{
// 文本
TextEditor(text: $textEditorText)
.frame(height: 250)
//.foregroundColor(.black)
//.background(Color.red)
.colorMultiply(Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)))
.cornerRadius(10)
// 按钮
Button {
savedText = textEditorText
} label: {
Text("Save".uppercased())
.font(.headline)
.foregroundColor(.white)
.padding()
.frame(maxWidth: .infinity)
.background(Color.blue.cornerRadius(10))
}
Text(savedText)
// 弹簧
Spacer()
}
.padding()
//.background(Color.green)
.navigationTitle("TextEditor")
}
}
}
3.2 效果图:
4. Toggle 切换按钮的使用
4.1 实现
/// 切换按钮
struct ToggleBootcamp: View {
@State var toggleIsOn: Bool = false;
var body: some View {
VStack {
HStack {
Text("Status: ")
Text(toggleIsOn ? "Online" : "Offline")
}
.font(.title)
Toggle(
isOn: $toggleIsOn) {
Text("Label")
}
.toggleStyle(SwitchToggleStyle(tint: Color.purple))
Spacer()
}
.padding(.horizontal, 100)
}
}
4.2 效果图: