Button
Nút là thành phần cơ bản cho phép người dùng kích hoạt một nút hành động. Có 5 loại nút. Bảng sau đây mô tả giao diện 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 chúng.
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. |
Các nút có mức độ nhấn mạnh cao. Đây là những thao tác chính trong ứ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. |
Sắc màu được tô màu nền |
Màu nền thay đổi cho phù hợp với vùng hiển thị. |
Dùng cả cho các hành động chính hoặc quan trọng. Các nút được tô màu nền giúp tăng trọng lượng hình ảnh và chức năng phù hợp, chẳng hạn như "thêm vào giỏ hàng" và "Đăng nhập". |
Hơi cao |
Nổi bật bằng cách đổ bóng. |
Có vai trò tương tự như các nút sắc độ. Tăng độ cao để làm cho nút xuất hiện nổi bật hơn. |
Đường viền (outlined) |
Có đường viền không tô màu. |
Các nút 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 thao tác chính. Các nút này hoạt động hiệu quả với các nút khác để cho biết 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. |
Các nút có mức độ nhấn mạnh thấp, phù hợp cho các thao tác ít quan trọng hơn như các đường liên kết điều hướng hoặ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.
Nền tảng API
onClick
: Hàm được gọi khi người dùng nhấn nút.enabled
: Khi đặt là false, tham số này sẽ khiến nút xuất hiện không có sẵn và không hoạt động.colors
: Một thực thể củaButtonColors
xác định màu đượ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 nền sử dụng thành phần kết hợp Button
cơ bản. Đó là
được tô bằng một khối đồng màu theo mặc định. Đoạn mã sau đây minh hoạ cách
triển khai thành phần này:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Phương thức triển khai có dạng như sau:
![Một nút tô màu nền với nền màu tím có nội dung "fill" (đã tô màu).](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=5&hl=vi)
Nút có màu nền
Thành phần nút sắc độ màu sử dụng thành phần kết hợp FilledTonalButton
.
Theo mặc định, lớp này được tô bằng một sắc độ màu.
Đoạn mã sau đây minh hoạ cách triển khai thành phần này:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Phương thức triển khai có dạng như sau:
![Một nút sắc độ có nền màu tím nhạt có nội dung "fill" (điền màu).](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=5&hl=vi)
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
. Nó
xuất hiện cùng với đường viền theo mặc định.
Đoạn mã sau đây minh hoạ cách triển khai thành phần này:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Phương thức triển khai có dạng như sau:
![Một nút có đường viền trong suốt với đường viền tối có nội dung "Outlined".](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=5&hl=vi)
Nút nhô lên
Thành phần nút nâng cao sử dụng thành phần kết hợp ElevatedButton
. Có
theo mặc định, bóng thể hiện hiệu ứng độ cao. Xin lưu ý rằng
về cơ bản là nút có đường viền có bóng.
Đoạn mã sau đây minh hoạ cách triển khai thành phần này:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Phương thức triển khai có dạng như sau:
![Một nút nâng cao có nền màu xám có nội dung "Nâng cao".](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=5&hl=vi)
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ó sẽ chỉ xuất hiện dưới dạng văn bản. Theo mặc định, biểu ngữ này không có màu nền hoặc đường viền đồng nhất.
Đoạn mã sau đây minh hoạ cách triển khai thành phần này:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Phương thức triển khai có dạng như sau:
![Nút văn bản có nội dung "Text Button" (Nút văn bản)](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=5&hl=vi)