Button trong SwiftUI

Button là một điều khiển UI rất cơ bản có thể tìm thấy trong tất cả các ứng dụng và có thể xử lý cảm ứng từ người dùng và kích hoạt một hành động nhất định. Nếu ai đã học lập trình iOS trước đây, Button trong SwiftUI rất giống với UIButton trong UIKit

 Tạo project mới sử dụng SwiftUI

Để bắt đầu với những điều cơ bản và tạo một nút đơn giản bằng SwiftUI. Đầu tiên, kích hoạt Xcode và tạo dự án mới lựa chọn Single View Application . Và chắc chạn bạn phải kiểm tra Use Interface sử dụng SwiftUI.

Khi lưu project, Xcode sẽ tải tệp ContentView.swift và hiển thị bản xem trước trong khung preview. Trong trường hợp bản preview không được hiển thị, hãy chọn Resume

Tạo một Button đơn giản với SwiftUI

Rất dễ dàng để tạo một Button bằng SwiftUI. Về cơ bản, bạn có thể sử dụng đoạn mã dưới đây để tạo Button:

Button(action: {
   // Làm gì
}) {
   // Button trông như thế nào
}

Khi tạo Button, chúng ta cần viết 2 đoạn mã

1. Làm gì - mã để thực hiện sau khi nhấn nút hoặc người dùng chọn.

2. Button trông như thế nào - mô tả giao diện của nút.

Ví dụ: Nếu muốn Text Hello World trở thành một nút, mã sẽ được viết như sau:

Button(action: {
    print("Hello World")
}) {
    Text("Hello World")
}

Bây giờ thì văn bản Hello World đã trở thành một nút:

Tuỳ chỉnh font chữ và nền

Đã biết cách tạo một nút đơn giản, hãy cho phép tùy chỉnh giao diện của nó với các công cụ sửa đổi tích hợp. Để thay đổi màu nền và màu văn bản, bạn có thể sử dụng các công cụ sửa đổi background và foregroundColor như thế này:

Text("Hello World")
    .background(Color.purple)
    .foregroundColor(.white)

Nếu muốn thay đổi loại font chữ, ta chỉ cần thêm .font(.title):

Text("Hello World")
    .background(Color.purple)
    .foregroundColor(.white)
    .font(.title)

Sau khi thay đổi, Button sẽ trông như sau:

Nút đã trông rất tốt, chúng ta sẽ thêm phần không gian xung quanh để trông đẹp hơn, chúng ta sử dụng padding()

Text("Hello World")
    .padding()
    .background(Color.purple)
    .foregroundColor(.white)
    .font(.title)

Thứ tự các thuộc tính là rất quan trọng

Nếu đặt công cụ sửa đổi phần padding() sau background(), bạn vẫn có thể thêm một số phần padding() vào nút nhưng nó sẽ không có màu nền 

Text("Hello World")
    .background(Color.purple) // 1. Thay đổi backgroundColor thành màu tím
    .foregroundColor(.white)  // 2. Thay đổi font color thành màu trắng
    .font(.title)             // 3. Thay đổi kiểu font
    .padding()                // 4. Thêm padding với màu mặc định (nghĩa là màu trắng)

Ngược lại, các thuộc tính sẽ hoạt động như thế này nếu công cụ sửa đổi padding() được đặt trước background():

Text("Hello World")
    .padding()                // 1. Thêm padding 
    .background(Color.purple) // 2. Thay đổi backgroundColor thành màu tím bao gồm cả padding
    .foregroundColor(.white)  // 3. Thay đổi font color thành màu trắng
    .font(.title)             // 4. Thay đổi kiểu font

Thêm viền cho Button

Không có nghĩa là padding() phải luôn luôn được đặt ngay từ đầu. Nó chỉ phụ thuộc vào thiết kế nút của bạn. Nếu bạn muốn tạo một nút có viền như thế này:

Chúng ta có thể thay đổi mã thành như sau:

Text("Hello World")
    .foregroundColor(.purple)
    .font(.title)
    .padding()
    .border(Color.purple, width: 5)

Thuộc tính border() được sử dụng để xác định độ rộng và màu sắc đường viền.

Một ví dụ khác:

Text("Hello World")
    .fontWeight(.bold)
    .font(.title)
    .padding()
    .background(Color.purple)
    .foregroundColor(.white)
    .padding(10)
    .border(Color.purple, width: 5)

 Đoãn mã trên đã sử dụng 2 lần padding(), padding() đầu tiên cùng với background(), là để tạo một nút có phần đệm và nền màu tím. padding(10) bổ sung thêm phần đệm xung quanh nút và công cụ sửa đổi border chỉ định vẽ đường viền bằng màu tím

Một ví dụ phức tạp hơn, nếu muốn nút có viền tròn như thế này thì sao:

SwiftUI đi kèm với một công cụ sửa đổi có tên cornerRadius cho phép bạn dễ dàng tạo các góc tròn. Để hiển thị nút nền nền với các góc được làm tròn, bạn chỉ cần sử dụng công cụ sửa đổi và chỉ định bán kính góc như thế này:

.cornerRadius(40)

Đối với đường viền có các góc được làm tròn, nó sẽ mất một chút công việc vì công cụ sửa đổi border() không cho phép bạn tạo các góc tròn. Vì vậy, những gì chúng ta cần làm là vẽ một đường viền và phủ nó lên nút. 

Đoạn mã như sau:

Text("Hello World")
    .fontWeight(.bold)
    .font(.title)
    .padding()
    .background(Color.purple)
    .cornerRadius(40)
    .foregroundColor(.white)
    .padding(10)
    .overlay(
        RoundedRectangle(cornerRadius: 40)
            .stroke(Color.purple, lineWidth: 5)
    )

Công cụ sửa đổi overlay() cho phép bạn phủ một chế độ xem khác lên trên chế độ xem hiện tại. Trong mã, những gì chúng ta đã làm là vẽ một đường viền với các góc được làm tròn bằng cách sử dụng công cụ sửa đổi stroke() của đối tượng RoundedRectangle(). Công cụ sửa đổi stroke() cho phép bạn định cấu hình màu và độ rộng đường của nét.

Tạo nút có hình ảnh và văn bản

Cú pháp tạo nút hình ảnh hoàn toàn giống nhau ngoại trừ việc bạn sử dụng điều khiển Image thay vì điều khiển Text như thế này:

Button(action: {
    print("Delete button tapped!")
}) {
    Image(systemName: "trash")
        .font(.largeTitle)
        .foregroundColor(.red)
}

Để thuận tiện, chúng tôi sử dụng icon tích hợp của hệ thống trash để tạo nút hình ảnh. Chúng tôi chỉ định sử dụng .largeTitle trong công cụ sửa đổi phông chữ để làm cho hình ảnh lớn hơn một chút. Nút của bạn sẽ trông như thế này:

Tương tự, nếu bạn muốn tạo một nút hình tròn với màu nền, bạn có thể áp dụng các sửa đổi mà chúng ta đã thảo luận trước đó. 

Bạn có thể sử dụng cả văn bản và hình ảnh để tạo một nút. Giả sử, bạn muốn đặt từ Delete bên cạnh biểu tượng. Mã code sẽ như sau:

Button(action: {
    print("Delete tapped!")
}) {
    HStack {
        Image(systemName: "trash")
            .font(.title)
        Text("Delete")
            .fontWeight(.semibold)
            .font(.title)
    }
    .padding()
    .foregroundColor(.white)
    .background(Color.red)
    .cornerRadius(40)
}

Ở đây chúng tôi nhúng cả hình ảnh và văn bản trong một ngăn xếp ngang HStack. Điều này sẽ đặt biểu tượng trash và Delete cạnh nhau. Các công cụ sửa đổi được áp dụng cho HStack đặt background(), padding() và bo góc.

Tạo nút có nền gradient và bóng

Với SwiftUI, bạn có thể dễ dàng tạo kiểu cho nút với nền gradient

Thay thế

.background(Color.red)

bởi:

.background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), 
                           startPoint: .leading, 
                           endPoint: .trailing))

Đoạn mã trên áp dụng một gradient tuyến tính từ trái (.lead) sang phải (.trailing). Nó bắt đầu với màu đỏ ở bên trái và kết thúc bằng màu xanh ở bên phải.

Nếu bạn muốn gradient từ trên xuống dưới, bạn chỉ cần đổi startPoint thành .top, endPoint thành .bottom:

.background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), 
                           startPoint: .top, 
                           endPoint: .bottom))

Có một sửa đổi nữa tôi muốn hiển thị trong phần này. Công cụ sửa đổi shadow() cho phép bạn vẽ một bóng xung quanh nút (hoặc bất kỳ chế độ xem nào). Chỉ cần thêm dòng mã này sau công cụ sửa đổi cornerRadius() và xem kết quả:

.shadow(color: .gray, radius: 10.0, x: 5, y: 5)

Tạo nút fit chiều rộng

Các nút lớn hơn thường thu hút sự chú ý của người dùng. Đôi khi, bạn có thể cần tạo một nút có chiều rộng đầy đủ chiếm chiều rộng của màn hình. Công cụ sửa đổi frame() được thiết kế để cho phép bạn kiểm soát kích thước của chế độ xem. Cho dù bạn muốn tạo một nút kích thước cố định hoặc một nút có chiều rộng thay đổi, bạn có thể sử dụng công cụ sửa đổi này. Để tạo nút toàn chiều rộng, bạn có thể thay đổi mã như sau:

Button(action: {
    print("Delete tapped!")
}) {
    HStack {
        Image(systemName: "trash")
            .font(.title)
        Text("Delete")
            .fontWeight(.semibold)
            .font(.title)
    }
    .frame(minWidth: 0, maxWidth: .infinity)
    .padding()
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.green], startPoint: .leading, endPoint: .trailing))
    .cornerRadius(40)
}

Ở đây chúng tôi xác định một chiều rộng linh hoạt cho nút. Chúng tôi đặt tham số maxWidth thành .infinity. Điều đó có nghĩa là nút sẽ lấp đầy chiều rộng của chế độ xem container. Trong khung vẽ, nó sẽ hiển thị cho bạn một nút toàn chiều rộng.

Bằng cách xác định maxWidth thành .infinity, chiều rộng của nút sẽ được điều chỉnh tự động tùy thuộc vào chiều rộng màn hình của thiết bị. Nếu bạn muốn nút có thêm không gian ngang, hãy chèn công cụ sửa đổi padding() sau .cornerRadius (40):

.padding(.horizontal, 20)

 Trong hướng dẫn này, tôi đã giới thiệu cho bạn về phần Điều khiển Button của SwiftUI. Sức mạnh của framework mới này cho phép các nhà phát triển dễ dàng xây dựng các điều khiển nút linh hoạt với một vài dòng mã. Trong hướng dẫn SwiftUI tiếp theo, chúng ta sẽ tìm hiểu sâu hơn để tạo hiệu ứng chạm vào nút và tạo kiểu nút có thể sử dụng lại.

Tham khảo tại appcoda