Button

Nút là các thành phần cơ bản cho phép người dùng kích hoạt một thao tác đã xác định. Có 5 loại nút. Bảng sau đây mô tả giao diện của từng loại nút trong số 5 loại, cũng như vị trí bạn nên sử dụng các nút đó.

Loại	Diện mạo	Mục đích
Lấp đầy (filled)	Nền đồng nhất với văn bản tương phản.	Nút nhấn mạnh. Đây là các nút cho các thao tác chính trong ứng dụng, chẳng hạn như "gửi" và "lưu". Hiệu ứng bóng nhấn mạnh tầm quan trọng của nút.
Sắc độ được tô màu	Màu nền thay đổi để phù hợp với bề mặt.	Ngoài ra, bạn cũng có thể sử dụng cho các hành động chính hoặc quan trọng. Nút được tô màu sẽ tạo thêm trọng lượng hình ảnh và phù hợp với các chức năng như "thêm vào giỏ hàng" và "Đăng nhập".
Hơi cao	Nổi bật nhờ có bóng.	Có vai trò tương tự như các nút sắc độ. Tăng độ cao để nút xuất hiện nổi bật hơn.
Đường viền (outlined)	Có đường viền không có màu nền.	Nút nhấn có mức độ nhấn mạnh trung bình, chứa các thao tác quan trọng nhưng không phải là thao tác chính. Các nút này kết hợp tốt với các nút khác để biểu thị các hành động phụ, thay thế như "Huỷ" hoặc "Quay lại".
Văn bản	Hiển thị văn bản không có nền hoặc đường viền.	Nút có mức độ nhấn mạnh thấp, phù hợp với các thao tác ít quan trọng hơn như đường liên kết điều hướng hoặc các chức năng phụ như "Tìm hiểu thêm" hoặc "Xem chi tiết".

Hình ảnh sau đây minh hoạ 5 loại nút trong Material Design.

Hình 1. Năm thành phần nút.

Nền tảng API

• onClick: Hàm được gọi khi người dùng nhấn vào nút.
• enabled: Khi có giá trị false, tham số này sẽ khiến nút không xuất hiện và không hoạt động.
• colors: Một thực thể của ButtonColors xác định màu sắc được sử dụng trong nút.
• contentPadding: Khoảng đệm trong nút.

Nút được tô màu nền

Thành phần nút được tô màu sử dụng thành phần kết hợp Button cơ bản. Theo mặc định, hình này được tô bằng một màu đồng nhất. Đoạn mã sau đây minh hoạ cách triển khai thành phần:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Lưu ý: Nếu bạn muốn tạo một nút tuỳ chỉnh, hãy sử dụng thành phần kết hợp Button.

Phương thức triển khai có dạng như sau:

Hình 2. Nút được tô màu nền.

Nút có sắc độ được tô màu nền

Thành phần nút tông màu được tô màu sử dụng thành phần kết hợp FilledTonalButton. Theo mặc định, vùng này được tô bằng màu sắc.

Đoạn mã sau đây minh hoạ cách triển khai thành phần:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Phương thức triển khai có dạng như sau:

Hình 3. Nút có sắc độ.

Nút có đường viền

Thành phần nút có đường viền sử dụng thành phần kết hợp OutlinedButton. Theo mặc định, thành phần hiển thị với đường viền.

Đoạn mã sau đây minh hoạ cách triển khai thành phần:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Phương thức triển khai có dạng như sau:

Hình 4. Một nút có đường viền.

Nút lồi

Thành phần nút nâng cao sử dụng thành phần kết hợp ElevatedButton. Theo mặc định, thành phần hiển thị này có một bóng biểu thị hiệu ứng độ cao. Lưu ý rằng về cơ bản, đó là một nút được viền có bóng.

Đoạn mã sau đây minh hoạ cách triển khai thành phần:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Phương thức triển khai có dạng như sau:

Hình 5. Một nút nổi.

Nút văn bản

Thành phần nút văn bản sử dụng thành phần kết hợp TextButton. Cho đến khi được nhấn, nút này sẽ chỉ xuất hiện dưới dạng văn bản. Theo mặc định, hình dạng này không có đường viền hoặc màu nền đồng nhất.

Đoạn mã sau đây minh hoạ cách triển khai thành phần:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Phương thức triển khai có dạng như sau:

Hình 6. Nút văn bản.

Tài nguyên khác

• Nút hành động nổi
• Tài liệu về giao diện người dùng Material