✏️ MyCard
struct MyCard: View {
var icon: String
var title: String
var start: String
var end: String
var bgColor: Color
var body: some View {
HStack(spacing: 20) {
Image(systemName: icon)
.font(.system(size: 40))
.foregroundColor(.white)
VStack(alignment: .leading, spacing: 0) {
Text(title)
.fontWeight(.bold)
.font(.system(size: 23))
.foregroundColor(Color.white)
Spacer().frame(height: 5)
Text("\(start) - \(end)")
.foregroundColor(Color.white)
}
Spacer()
}
.padding(20)
.background(bgColor)
.cornerRadius(20)
}
}
struct MyCard_Previews: PreviewProvider {
static var previews: some View {
MyCard(icon: "book.fill", title: "책읽기", start: "1 PM", end: "3 PM", bgColor: Color.green)
}
}
기존 MyBasicCard와 비슷하지만 생성자를 통해 같은 내용의 View가 아닌 매번 새로운 내용을 넣을 수 있게 하였다.
ContentView
✏️
ScrollView {
VStack {
MyProjectCard()
MyBasicCard()
MyCard(icon: "tray.fill", title: "책상 정리하기", start: "10 AM", end: "11 AM", bgColor: Color.blue)
MyCard(icon: "tv.fill", title: "영상 다시보기", start: "8 AM", end: "9 AM", bgColor: Color.blue)
MyCard(icon: "cart.fill", title: "마트 장보기", start: "10 AM", end: "11 AM", bgColor: Color.blue)
MyCard(icon: "gamecontroller.fill", title: "오버워치 한판하기", start: "2 PM", end: "3 PM", bgColor: Color.blue)
}
.padding()
}
이처럼 매번 다른 내용을 생성자 파라미터를 이용해 쉽게 View를 만든다.
MyProjectCard
✏️
struct MyProjectCard: View {
@State private var shouldShowAlert: Bool = false
var body: some View {
VStack(alignment: .leading, spacing: 0) {
// ...
HStack {
// ...
Button(action: {
print("DEBUG: 확인 버튼이 클릭되었다.")
self.shouldShowAlert = true
}) {
Text("확인")
.fontWeight(.bold)
.foregroundColor(.white)
.padding()
.frame(width: 80)
.background(Color.blue)
.cornerRadius(20)
}
.alert(isPresented: $shouldShowAlert) {
Alert(title: Text("알림창입니다!"))
}
}
}
// ...
}
}
- @State 변수인 shouldShowAlert를 선언한다.
- 버튼을 누르면 shouldShowAlert의 값을 true로 변경한다.
- View 프로토콜의 modifier인 alert(...)를 사용해 창을 띄운다. .alert는 더욱 선언적으로 alert를 사용할 수 있다.
- isPresented가 true일 때 alert를 띄우는데 Button의 action에서 shouldShowAlert의 값을 true로 변경하여 알림이 뜬다.
- alert가 노출될 때 @State 프로퍼티(shouldShowAlert)를 true로 설정해주며 사용자가 alert를 해제하면
이 값은 자동으로 false로 변경되고 alert는 사라진다.
'SwiftUI' 카테고리의 다른 글
SwiftUI) Layout_Practice_with_Stacks_#3 (0) | 2023.03.29 |
---|---|
SwiftUI) Layout_Practice_with_Stacks_#1 (0) | 2023.03.29 |
SwiftUI) Stacks (0) | 2023.03.29 |
SwiftUI) Image (0) | 2023.03.29 |
SwiftUI) Text (0) | 2023.03.29 |
댓글