Chắc chắn, đây là tổng quan chi tiết về cách bạn có thể thay đổi kích thước của SwiftUI Switch trong Swift.
SwiftUI là framework của Apple để xây dựng giao diện người dùng trên tất cả các nền tảng của Apple với sức mạnh của Swift. Đôi khi, các nhà phát triển có thể cần phải điều chỉnh kích thước của các thành phần giao diện người dùng cụ thể, chẳng hạn như một nút chuyển. Theo mặc định, SwiftUI không cho phép thay đổi trực tiếp kích thước của Switch, nhưng chúng ta có thể sử dụng một số cách giải quyết để đạt được điều này.
Hãy đi sâu vào giải pháp cho vấn đề.
Tạo một công tắc tùy chỉnh trong SwiftUI
Để điều chỉnh kích thước của Switch trong SwiftUI, một cách tiếp cận là tạo Switch tùy chỉnh. Điều này cho phép bạn có toàn quyền kiểm soát hình thức và kích thước của Switch.
Đây là một ví dụ về mã tạo một công tắc tùy chỉnh:
struct CustomSwitch: View {
@Binding var isOn: Bool
var body: some View {
Button(action: {
self.isOn.toggle()
}) {
Rectangle()
.fill(self.isOn ? Color.green : Color.gray)
.frame(width: 50, height: 30)
.overlay(Circle()
.fill(Color.white)
.offset(x: self.isOn ? 10 : -10),
alignment: self.isOn ? .trailing : .leading)
.cornerRadius(15)
.animation(.spring())
}
}
}
Hiểu mã chuyển đổi tùy chỉnh
Hãy phân tích xem đoạn mã này làm gì:
- Cấu trúc CustomSwitch: Điều này xác định Chế độ xem SwiftUI tùy chỉnh của chúng tôi. Nó có liên kết với giá trị boolean – trạng thái của switch.
- Hành động của nút: Khối mã Swift này chỉ định hành vi khi nhấn nút. Ở đây, chỉ cần chuyển trạng thái “isOn”.
- Hình chữ nhật: Một phiên bản cấu trúc Hình chữ nhật của SwiftUI, xác định các thuộc tính của hình dạng.
- Tô màu: Màu sắc của Hình chữ nhật phụ thuộc vào việc “isOn” là đúng hay sai.
- Frame: Công cụ sửa đổi khung ở đây cho biết chiều rộng và chiều cao của công tắc tùy chỉnh.
- Lớp phủ: Công cụ sửa đổi lớp phủ cho phép bạn xếp một Chế độ xem SwiftUI khác lên trên chế độ xem hiện có - ở đây, Vòng tròn màu trắng đóng vai trò là núm chuyển đổi.
- Bù lại: Công cụ sửa đổi offset được sử dụng ở đây để di chuyển Vòng tròn tùy thuộc vào việc “isOn” là đúng hay sai, tạo ảo giác rằng công tắc đang bật.
- bán kính góc: Điều này áp dụng làm tròn các góc của Hình chữ nhật bên dưới.
- hoạt hình: Công cụ sửa đổi hoạt ảnh áp dụng hoạt ảnh spring() cho toàn bộ Nút – vì vậy khi bạn chuyển đổi, nó sẽ chuyển đổi trơn tru.
Tổng kết
Khả năng tùy chỉnh kích thước của SwiftUI Switch có thể là một lợi thế khi điều chỉnh giao diện người dùng để phù hợp với nhu cầu ứng dụng cụ thể. Chúng tôi đã học được một cách để đạt được điều này bằng cách tạo một Công tắc tùy chỉnh. Chúc mừng mã hóa!
Ghi nhớ: SwiftUI khá linh hoạt và có thể tùy chỉnh. Vui lòng điều chỉnh các giá trị và thuộc tính trong mã ở trên để phù hợp hơn với nhu cầu thiết kế và dự án của bạn. Nếu bạn cần thay đổi kích thước của bất kỳ thành phần giao diện người dùng nào khác, phương pháp tạo tùy chỉnh có thể được áp dụng theo cách tương tự.
