Nút

keywords: AiAssisted, product:JetpackCompose

Nút là 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 này mô tả hình thức của từng loại trong số 5 loại nút, 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 có độ tương phản. Nút nhấn mạnh. Đây là những thao tác chính trong một ứng dụng, chẳng hạn như "gửi" và "lưu". Hiệu ứng đổ bóng làm nổi bật tầm quan trọng của nút.
Đã tô màu nền Màu nền thay đổi cho phù hợp với vùng hiển thị. Cũng dành cho các hành động chính hoặc quan trọng. Nút có tông màu được tô đầy mang lại trọng số trực quan cao hơn 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ó mục đích tương tự như nút có tông màu. Tăng độ nâng để nút xuất hiện nổi bật hơn nữa.
Đường viền (outlined) Có đường viền không có màu nền. Nút nhấn 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ị 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ó độ nhấn mạnh thấp, phù hợp với những hành động ít quan trọng hơn, chẳ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 này minh hoạ 5 loại nút trong Material Design:

Ví dụ về từng thành phần trong số 5 thành phần nút, trong đó nêu bật các đặc điểm riêng biệt của từng thành phần.
Hình 1. Năm thành phần nút.

Nền tảng API

onClick
Hàm mà hệ thống gọi khi người dùng nhấn vào nút.
enabled
Khi false, tham số này khiến nút xuất hiện ở trạng thái không dùng được và không hoạt động.
colors
Một thực thể của ButtonColors xác định màu sắc được 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 nền sử dụng thành phần kết hợp cơ bản Button. Theo mặc định, hình này được tô bằng một màu đồng nhất. Đoạn mã này cho biết cách triển khai thành phần:

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

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

Một nút được tô màu nền có nền màu tím và nội dung "Đã tô màu nền".
Hình 2. Nút được tô màu nền.

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

Thành phần nút đượ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ột màu sắc.

Đoạn mã này cho biết 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:

Một nút có tông màu với nền màu tím nhạt có nội dung "Tonal" (Có tông màu).
Hình 3. Nút có tông màu.

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, đường viền sẽ xuất hiện.

Đoạn mã này cho biết 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:

Một nút trong suốt có đường viền màu tối với nội dung "Có đường viền".
Hình 4. Nút có đường viền.

Nút lồi

Thành phần nút có độ nâng sử dụng thành phần kết hợp ElevatedButton. Theo mặc định, nút này có bóng thể hiện hiệu ứng độ cao. Đây là một nút được tô màu nền có bóng đổ.

Đoạn mã này cho biết 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:

Một nút nâng lên có nền màu xám với nội dung "Nâng lên".
Hình 5. Một nút lồ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. Nút này chỉ xuất hiện dưới dạng văn bản cho đến khi được nhấn. Theo mặc định, hình này không có đường viền hoặc màu tô đồng nhất.

Đoạn mã này cho biết 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:

Một nút văn bản có nội dung "Nút văn bản"
Hình 6. Một nút văn bản.

Tài nguyên khác