[SwiftUI Bootcamp] beginner8

ActionSheet => confirmationDialog

액션싯이 confirmationDialog로 변경되었다

구현 방법은 actionSheet이 뜨게하고 싶은 뷰에 모디파이어로 달아주면됨

.contextMenu()

contextMenu는 꾹 눌렀을 때 메뉴가 뜨게 해주는 메뉴다

구성은 이런식으로 넣고 싶은 뷰에 .contextMenu를 하고 띄워줄 뷰를 선언하면됨

그럼 꾹 눌렀을 때 요런 뷰가 뜬다!!

struct ContextMenuBootcamp: View {
    @State var backgroundColor: Color = .purple
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Image(systemName: "house.fill")
                .font(.title)
            Text("Swiftful Thinking")
                .font(.headline)
            Text("How to use Context Menu")
                .font(.subheadline)
        }
        .foregroundColor(.white)
        .padding(20)
        .background(backgroundColor).cornerRadius(30)
        .contextMenu {
            Button {
                backgroundColor = .yellow
            } label: {
                Label("Share post", systemImage: "flame.fill")
            }            
            Button {
                backgroundColor = .blue
            } label: {
                Text("Report post")
            }
            
            Button {
                backgroundColor = .brown
            } label: {
                HStack {
                    Text("Like post")
                    Image(systemName: "heart.fill")
                }
            }
        }
    }
}

backgroundColor의 칼라가 변경되는 contextMenu를 구성해봤다!

---

TextField

struct TextFieldBootcamp: View {
    @State var textFieldText: String = ""
    var body: some View {
        TextField("Type something here...", text: $textFieldText)
            //.textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
            .background(.gray.opacity(0.3)).cornerRadius(10)
            .foregroundColor(.red)
            .font(.headline)
    }
}

텍스트필드에는 플레이스 홀더와, 텍스트의 변경사항을 담아줄 Binding된 String이 필요함

텍스트필드의 값을 저장해보자

struct TextFieldBootcamp: View {
    @State var textFieldText: String = ""
    @State var dataArray: [String] = []
    var body: some View {
        NavigationView {
            VStack {
                TextField("Type something here...", text: $textFieldText)
                //.textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding()
                    .background(.gray.opacity(0.3)).cornerRadius(10)
                    .foregroundColor(.red)
                    .font(.headline)
                
                Button {
                    saveText()
                } label: {
                    Text("Save".uppercased())
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(.blue).cornerRadius(10)
                        .foregroundColor(.white)
                        .font(.headline)
                }
                
                ForEach(dataArray, id: \.self) { data in
                    Text(data)
                }
                
                Spacer()
            }
            .padding()
            .navigationTitle("TextField Bootcamp")
        }
    }
    
    func saveText() {
        dataArray.append(textFieldText)
        textFieldText = ""
    }
}

🤔Save button이 눌리면 어떻게 텍스트필드 커서가 꺼지게 해줄 수 있을까?
TextField를 초기화할 때 onCommit이라는 메소드가 있음 거기서 해주면 될듯
(미해결)

textIsAppropriate이라는 메소드를 새로 파준다

그리고 이 값에 따라서 button이 비활성화되기도하고, button색도 변경하게 해주면
유저가 좀더 가시적으로 확인이 가능해짐

__

TextEditor()

struct TextEditorBootcamp: View {
    
    @State var textEditorText: String = "This is the starting text."
    var body: some View {
        NavigationView {
            VStack {
                TextEditor(text: $textEditorText)
                    .frame(height: 250)
                Button {
                    
                } label: {
                    Text("Save".uppercased())
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                        .cornerRadius(10)
                }
                Spacer()
            }
            .padding()
            .background(.green)
            .navigationTitle("TextEditor")
        }
    }
}

텍스트에디터는 여러줄로 텍스트를 작성해야할 경우에 사용한다

아쉽게도 텍스트필드는 디스플레이를 커스텀하기 조금 어려움

그래서 만약에 배경색을 바꾸고 싶으면 .colorMultiply를 사용해서 바꿔줌

---

Toggle

struct ToggleBootcamp: View {
    
    @State var toggleIsOn: Bool = false
    
    var body: some View {
        VStack {
            HStack {
                Text("Status:")
                Text(toggleIsOn ? "Online":"Offline")
            }
            .font(.largeTitle)
            
            Toggle(isOn: $toggleIsOn) {
                Text("Change status")
            }
            .toggleStyle(.automatic)
            .tint(.orange)
            
            Spacer()
        }
        .padding([.horizontal, .top], 30 )
    }
}

switch 색상은 tint값 변경하는 걸로 바뀜