Kiểu nút trong SwiftUI

SwiftUI cung cấp một cách mạnh mẽ để tạo và tùy chỉnh chế độ xem bằng các giao thức tạo kiểu. Các giao thức này cho phép chúng tôi xác định giao diện của các chế độ xem của chúng tôi trong một dòng mã.

Do đó, các chế độ xem nhất quán về mặt hình ảnh, giúp ứng dụng dễ sử dụng và hấp dẫn hơn.

Nút tạo kiểu không có ButtonStyle

Chúng tôi có thể tạo kiểu nội tuyến cho nút của mình bằng cách áp dụng các công cụ sửa đổi khác nhau cho nút đó. Hãy xem xét ví dụ này:

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

Cách tiếp cận này hoàn toàn ổn nếu bạn thiết kế một nút duy nhất. Nhưng nếu bạn cần phát triển nhiều nút có cùng kiểu, bạn cần sử dụng ButtonStylegiao thức. Nó sẽ giúp chia sẻ và áp dụng cùng một kiểu cho các nút khác nhau trên ứng dụng.

Nút tạo kiểu với ButtonStyle

Hãy tạo kiểu nút tùy chỉnh có tên PrimaryButtonStyle. Đây là phong cách được sử dụng cho các nút chính trong toàn bộ ứng dụng.

Hãy xem ví dụ này:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

Để áp dụng kiểu nút đã tạo, hãy thử viết như sau:

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

NútPhong cáchCấu hình

Đối tượng cấu hình của nút có một số thuộc tính, bao gồm isPressedgiá trị boolean, cho biết nút hiện đang được nhấn hay không. Chúng tôi có thể sử dụng điều đó để thay đổi kiểu nút của mình khi người dùng nhấn vào nút. Để làm điều đó, chúng ta có thể viết một cái gì đó như thế này:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

mẹo chuyên nghiệp

Mã của chúng tôi có thể được làm sạch hơn và dễ đọc hơn bằng cách thêm phần mở rộng sau vào PrimaryButtonStyle:

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

Với ButtonStyle, chúng ta có thể xác định giao diện, bố cục và tương tác của một nút và đảm bảo tính nhất quán trên toàn bộ ứng dụng.

Ngoài ra, nó cung cấp một cách để đóng gói logic và kiểu dáng liên quan đến nút thành các thành phần có thể tái sử dụng. Điều này làm cho cơ sở mã dễ bảo trì và có thể mở rộng hơn.

Cảm ơn vì đã đọc!

Nếu bạn thấy bài viết này hữu ích, hãy nhớ vỗ tay để những người khác có thể khám phá nó dễ dàng hơn.