ContextMenu, TextField, TextEditor, Toggle 的使用

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 效果图: