Written by on March 3, 2021

Extracting subview – SwiftUI Notes #5

SwiftUI

Chào bạn đến với Fx Studio. Bài viết này sẽ giúp bạn tạo một Subview với SwiftUI. Và cũng là bài viết tiếp nối  của 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, chúng ta sử dụng tiếp project ở bài trước. Bạn có thể checkout code tại đây:

Với bài viết này, bạn có thể sử dụng code của ContentView từ bài viết trước. Tạm thời, mình sẽ dụng đoạn code tạo giao diện từ bài viết trước như sau:

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)
            }

Giao diện hiển thị sẽ trông như thế này:

Updating UI - SwiftUI

Tại bài viết trước, chúng ta có một vấn đề cần phải được giải quyết ngày. Đó là:

Số dòng code phát sinh trong SwiftUI quá dài.

1. Tái sử dụng

Mọi việc đơn giản khi mỗi View được tạo ra là duy nhất. Tuy nhiên với các ứng dụng, nhiều Control lặp lại trong chính một màn hình. Ta có bài toán mới với giao diện như sau:

Ta sẽ có tới 3 block giao diện nhỏ trong một màn hình. Và chúng giống nhau. Nếu như bạn suy nghĩ code của nó như thế nào. Thì bạn hãy nhìn đoạn code ở phần Chuẩn bị. Các bước như sau:

  1. Đưa block view cơ bản đầu tiền vào một HStack
  2. Sao chép lại block code view cơ bản đó
  3. Dán lại chúng nó thêm 2 lần nữa vào trong HStack

Cũng khá là EZ nhỉ!

Chúng ta sẽ nhân 3 lần số dòng code đó lên. Tuy nhiên, ở đời không ai làm như vậy cả. Vậy giải pháp kinh điểm muôn đời đó là:

Tạo một Subview, để tái sử dụng nhiều lần.

(Xin lỗi vì file code lúc này quá dài nên mình xin phép không bỏ vào đây!)

2. Extract Subview

Bạn sẽ bắt đầu lại bằng file code ở phần Chuẩn bị. Và ta có code của ContentView như sau:

struct ContentView: View {
    @State var number: Int = 10
    @State var isShowAlert: Bool = false
    @State var message: String = ""
    
    var body: some View {
        HStack {
            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)
            }
        }
        .alert(isPresented: $isShowAlert, content: {
            Alert(title: Text("Error"),
                  message: Text(message))
        })
    }
}

Bạn hãy đưa con trỏ về VStack và nhấn tổ hợp phím Command + click. Sau đó chọn như hình dưới đây.

Extract Subview

Sau đó, bạn bấm Enter và đổi tên đoạn code của mình vừa mới tách ra.

Rất nhanh chóng, với chức này hữu ích này của Xcode thì bạn đã nhanh chóng có một Custom View theo đúng cú pháp của SwiftUI rồi.

3. Hoàn thiện

Tuy nhiên, vì View và các Subview sẽ bị ràng buộc với nhau bởi các thuộc tính. Nên MyView mới sẽ bị lỗi. Công việc của bạn là fix chúng nó.

Đầu tiên, chuyển các thuộc tính ở ContentView về MyView.

@State var number: Int
@Binding var isShowAlert: Bool
@Binding var message: String

Có một chút khác biệt ở đây. Đó là @Binding. Vì chúng ta thay đổi giá trị tại Subview và giá trị này sẽ ảnh hưởng tới thuộc tính ở ContentView.

@Binding là một Property Wrappers trong SwiftUI, nó cho phép chúng ta khai báo một giá trị thực chất được khai báo ở một nơi khác, nhưng được chia sẻ lẫn nhau.

Và ta sẽ khởi tạo MyView trong ContentView như sau:

HStack {
            MyView(number: 10, isShowAlert: $isShowAlert, message: $message)
        }

Chú ý, bạn sẽ thấy các thuộc tính truyền vào hàm khởi tạo của MyView và bạn phải thêm từ khoá $ vào. Nôm na là báo cho View con kia biết địa chỉ gốc của thuộc tính mà dữ liệu mà nó sẽ gởi về mà thôi.

Okay! Ta sẽ có code hoàn thiện của MyView như sau:

struct MyView: View {
    
    @State var number: Int
    @Binding var isShowAlert: Bool
    @Binding 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)
        }
    }
}

Và code của ContentView như sau:

struct ContentView: View {
    
    @State var isShowAlert: Bool = false
    @State var message: String = ""
    
    var body: some View {
        HStack {
            MyView(number: 10, isShowAlert: $isShowAlert, message: $message)
            MyView(number: 10, isShowAlert: $isShowAlert, message: $message)
            MyView(number: 10, isShowAlert: $isShowAlert, message: $message)
        }
        .alert(isPresented: $isShowAlert, content: {
            Alert(title: Text("Error"),
                  message: Text(message))
        })
    }
}

Bạn hãy bấm Live Preview và tự cảm nhận kết quả nha! Giờ thì code của ContentView đã thu gọn đi nhiều lần rồi.

 

Tạm kết

  • Cách tách một đoạn code thành một Subview
  • Binding dữ liệu từ View con về View cha
  • @Binding vs. @State

 

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.

  • Bạn có thể checkout code tại đây.
  • Bài viết tiếp theo tại đây.

Cảm ơn bạn đã đọc bài viết này!

PinYummlyLinkedInPrintShares9

Related Posts:

Written by

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!

Leave a Reply

Your email address will not be published. Required fields are marked *