Contents
Chào bạn đến với Fx Studio. Bài viết này trình bày cách hiển thị một Alert trong SwiftUI, tương tự UIAlertViewController trong UIKit. Cũng là bài viết tiếp nối trong series SwiftUI Notes.
Bạn có thể đọc lại bài viết trước tại đây, nhằm để bổ sung thêm kiến thức trước khi vào bài viết này.
Và nếu như mọi việc đã ổn rồi, thì …
Bắt đầu thôi!
Chuẩn bị
Về mặt cấu hình và phiên bản sử dụng thì như sau:
-
- Xcode 12
- Swift 5.3
- SwiftUI 2.0
- MacOS 10.15.x
Về demo bài viết thì chúng ta sử dụng tiếp project ở bài trước. Bạn có thể checkout code tại đây:
-
- Toàn bộ repo: https://github.com/fx-studio/swiftui-notes
- Project bài trước: https://github.com/fx-studio/swiftui-notes/tree/main/003-UpdatingUI
Để giúp bạn thao tác nhanh hơn, bạn hãy sử dụng code sau cho ContentView.
struct ContentView: View {
@State var number: Int = 10
var body: some View {
VStack(alignment: .center) {
Button(action: {
number += 1
}) {
Image(systemName: "arrowtriangle.up.fill")
.resizable()
.frame(width: 50.0, height: 50.0)
.foregroundColor(.red)
}
.frame(width: 50.0, height: 50.0)
Text("\(number)")
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color.blue)
.multilineTextAlignment(.center)
Button(action: {
number -= 1
}) {
Image(systemName: "arrowtriangle.down.fill")
.resizable()
.frame(width: 50.0, height: 50.0)
}
.frame(width: 50.0, height: 50.0)
}
.frame(width: 50.0, height: 200.0)
}
}
Đây là code của bài viết trước và bạn sẽ thấy là code của chúng ta ngày càng dài ra. Nhưng bạn yên tâm, qua bài sau mình sẽ giải quyết vấn đề này trong vòng 1 nốt nhạc.
1. Action
Công việc chính của một lập trình viên là xử lý luồng sự kiện. Muốn hiển thị một cái gì đó lên, thì bạn cần phải có được duyên khởi cho nó.
Với bài toàn của chúng ta thì như sau:
- Nếu người dùng nhất nút tăng giá trị số, thì số sẽ được cộng thêm 1 đơn vị. Ngược lại với nút giảm.
- Giới hạn tối đa là 20
- Giới hạn tối thiểu là 0
Chúng ta có 2 Button và tại mỗi action của Button thì ta sẽ handle các yêu cầu trên. Cho bạn hình dung lại việc sử dụng action của Button là như thế nào, thì xem lại đoạn code sau.
Button(action: {
// code here
}) {
Text("Tap Me!")
}
2. Alert
Như đã nói ở trên, Alert được xem là một view phụ. Nó sẽ xuất hiện độc lập so với ContentView. Ta xem qua cách tạo một Alert đơn giản là như thế nào.
Alert(title: Text("Title"), message: Text("message"))
Nó tương tự như UIAlertViewController trong UIKit. Nhưng đây là SwiftUI, Alert cũng được xem là một view. Bạn cần gọi nó xuất hiện. Và phương thức ta cần sử dụng là .alert().
Kết hợp giữa 2 yếu tố:
- Xuất hiện độc lập
- Lập trình khai báo
Ta có thể gọi .alert() ở bất kì đâu trong ContentView. Tuy nhiên, cũng vì lập trình khai báo nên mọi thứ phải được viết ra hết. Do đó, nếu ta không muốn gọi Alert, thì cũng phải định nghĩa ra luôn. Vì vậy, bạn cần phải thêm một thuộc tính @State để quản lý việc lúc nào sẽ cho phép Alert xuất hiện.
Chúng ta sẽ thêm 2 thuộc tính sau:
@State var isShowAlert: Bool = false @State var message: String = ""
Thực chất là chỉ cần một thuộc tính Bool thôi. Cái kia mình làm cho nó màu mè một chút. Và khi bạn thay đổi trạng thái của thuộc tính isShowAlert = true thì Alert sẽ xuất hiện.
3. Binding
Tiếp tục câu chuyện ở trên, ta sẽ handle việc xuất hiện Alert như sau.
.alert(isPresented: $isShowAlert, content: {
Alert(title: Text("Error"),
message: Text(message))
})
Trong đó:
$isShowAlertsẽ dùng làm quyết định việc hiển thị của Alert- Với từ khoá
$, bạn cho phép việc tự động thay đổi giá trị của thuộc tính. Hay còn gọi là Binding ngược lại từ Alert nếu người dùng nhấn nút ẩn đi trên Alert. contentchính là đối tượng Alert mà bạn đã tạo ở phần trên.- Ta sử dụng biến
messageđể thay đổi nội dung hiển thị. Cho nó màu mè một chút thôi.
Cuối cùng, chính là cách thay đổi giản trị của isShowAlert tại đâu và khi nào. Bạn quay về action của Button. Ví dụ cho nút tăng giá trị.
Button(action: {
if number < 20 {
number += 1
} else {
isShowAlert = true
message = "Maximum"
}
}) {
Image(systemName: "arrowtriangle.up.fill")
.resizable()
.frame(width: 50.0, height: 50.0)
.foregroundColor(.red)
}
Bạn chỉ cần quan tâm với gán true còn việc ngược lại false thì Alert lo giúp bạn rồi. Bạn bấm Live Preview để tận hưởng kết quả nào.
Tiếp tục, áp dụng tương tự cho Button giảm nha. Còn sau đây, là code hoàn chỉnh của bài viết này để cho bạn tham khảo.
struct ContentView: View {
@State var number: Int = 10
@State var isShowAlert: Bool = false
@State var message: String = ""
var body: some View {
VStack(alignment: .center) {
Button(action: {
if number < 20 {
number += 1
} else {
isShowAlert = true
message = "Maximum"
}
}) {
Image(systemName: "arrowtriangle.up.fill")
.resizable()
.frame(width: 50.0, height: 50.0)
.foregroundColor(.red)
}
.frame(width: 50.0, height: 50.0)
Text("\(number)")
.font(.title)
.fontWeight(.bold)
.foregroundColor(Color.blue)
.multilineTextAlignment(.center)
Button(action: {
if number > 0 {
number -= 1
} else {
isShowAlert = true
message = "Minimum"
}
}) {
Image(systemName: "arrowtriangle.down.fill")
.resizable()
.frame(width: 50.0, height: 50.0)
}
.frame(width: 50.0, height: 50.0)
}
.frame(width: 50.0, height: 200.0)
.alert(isPresented: $isShowAlert, content: {
Alert(title: Text("Error"),
message: Text(message))
})
}
}
Tạm kết
- Cách hiển thị Alert & cách sử dụng phương thức
.alert() - Binding thuộc tính để quản lý việc hiển thị Alert
Okay! Tới đây, mình xin kết thúc bài viết này. Và nếu có gì thắc mắc hay góp ý cho mình thì bạn có thể để lại bình luận hoặc gởi email theo trang Contact.
Cảm ơn bạn đã đọc bài viết này!
Related Posts:
Leave a Reply
Donate – Buy me a coffee!
