Nút hành động nổi (FAB) là nút có mức độ nhấn mạnh cao cho phép người dùng thực hiện một hành động chính trong ứng dụng. Quảng cáo này khuyến khích một hành động tập trung duy nhất. Đây là lộ trình phổ biến nhất mà người dùng có thể thực hiện và thường được cố định ở dưới cùng bên phải màn hình.
Hãy cân nhắc ba trường hợp sử dụng sau đây mà bạn có thể dùng FAB:
- Tạo mục mới: Trong ứng dụng ghi chú, bạn có thể dùng FAB để nhanh chóng tạo một ghi chú mới.
- Thêm người liên hệ mới: Trong ứng dụng trò chuyện, FAB có thể mở một giao diện cho phép người dùng thêm người khác vào cuộc trò chuyện.
- Vị trí trung tâm: Trong giao diện bản đồ, FAB có thể căn giữa bản đồ ở vị trí hiện tại của người dùng.
Trong Material Design, có 4 loại FAB:
- FAB: Một nút hành động nổi có kích thước thông thường.
- FAB nhỏ: Một nút hành động nổi nhỏ hơn.
- FAB lớn: Nút hành động nổi lớn hơn.
- FAB mở rộng: Một nút hành động nổi không chỉ chứa một biểu tượng.
Nền tảng API
Mặc dù có một số thành phần kết hợp mà bạn có thể sử dụng để tạo các nút hành động nổi nhất quán với Material Design, nhưng tham số của chúng không khác nhau nhiều. Trong số các thông số chính, bạn cần lưu ý là những thông số sau:
onClick: Hàm được gọi khi người dùng nhấn nút.containerColor: Màu của nút.contentColor: Màu của biểu tượng.
Nút hành động nổi
Để tạo một nút hành động nổi chung, hãy sử dụng thành phần kết hợp FloatingActionButton cơ bản. Ví dụ sau đây minh hoạ cách triển khai cơ bản của FAB:
@Composable
fun Example(onClick: () -> Unit) {
FloatingActionButton(
onClick = { onClick() },
) {
Icon(Icons.Filled.Add, "Floating action button.")
}
}
Phương thức triển khai có dạng như sau:
Nút nhỏ
Để tạo một nút hành động nổi nhỏ, hãy sử dụng thành phần kết hợp SmallFloatingActionButton. Ví dụ sau minh hoạ cách thực hiện việc này, đồng thời bổ sung các màu tuỳ chỉnh.
@Composable
fun SmallExample(onClick: () -> Unit) {
SmallFloatingActionButton(
onClick = { onClick() },
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.secondary
) {
Icon(Icons.Filled.Add, "Small floating action button.")
}
}
Phương thức triển khai có dạng như sau:
Nút lớn
Để tạo một nút hành động nổi lớn, hãy sử dụng thành phần kết hợp LargeFloatingActionButton. Thành phần kết hợp này không khác biệt đáng kể so với các ví dụ khác, ngoại trừ việc nó tạo ra một nút lớn hơn.
Sau đây là cách triển khai đơn giản cho FAB lớn.
@Composable
fun LargeExample(onClick: () -> Unit) {
LargeFloatingActionButton(
onClick = { onClick() },
shape = CircleShape,
) {
Icon(Icons.Filled.Add, "Large floating action button")
}
}
Phương thức triển khai có dạng như sau:
Nút mở rộng
Bạn có thể tạo các nút hành động nổi phức tạp hơn bằng thành phần kết hợp ExtendedFloatingActionButton. Điểm khác biệt chính giữa API này và FloatingActionButton là có các tham số icon và text chuyên biệt. Chúng cho phép bạn tạo một nút có nội dung phức tạp hơn và điều chỉnh theo tỷ lệ cho phù hợp với nội dung.
Đoạn mã sau đây minh hoạ cách triển khai ExtendedFloatingActionButton, với các giá trị mẫu được chuyển cho icon và text.
@Composable
fun ExtendedExample(onClick: () -> Unit) {
ExtendedFloatingActionButton(
onClick = { onClick() },
icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
text = { Text(text = "Extended FAB") },
)
}
Phương thức triển khai có dạng như sau:
