Button
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 sau đây mô tả giao diện của từng loại trong số 5 loại nút, cũng như nơi bạn nên sử dụng các loại nút đó.
Loại |
Diện mạo |
Mục đích |
|---|---|---|
Lấp đầy (filled) |
Nền đồng nhất có văn bản 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 nhấn mạnh 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ó nền giúp tăng trọng số trực quan 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. |
Đóng vai trò 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 thường xuất hiện cùng các nút khác để biểu thị hành động phụ, thay thế, chẳng hạn 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 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 có giá trị 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ủaButtonColorsxá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ã sau đây minh hoạ cách triển khai thành phần:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Phương thức triển khai có dạng như sau:
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ã 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:
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ã 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:
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. Xin lưu ý rằng đây về cơ bản là một nút có đường viền và 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:
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 chỉ xuất hiện dưới dạng văn bả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ã 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:
