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. Nút này quảng bá một hành động tập trung duy nhất, là lộ trình phổ biến nhất mà người dùng có thể thực hiện và thường được neo ở dưới cùng bên phải của màn hình.
Hãy cân nhắc 3 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ú, FAB có thể được dùng để nhanh chóng hãy tạo một ghi chú mới.
- Thêm người liên hệ mới: Trong ứng dụng trò chuyện, một 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í giữa: Trong giao diện bản đồ, FAB có thể căn giữa bản đồ trê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 chứa nhiều loại thông tin .
Nền tảng API
Mặc dù bạn có thể dùng một số thành phần kết hợp để tạo thao tác nổi các nút nhất quán với Material Design, các tham số của chúng không khác nhau nhiều. Trong số các tham số chính mà bạn nên lưu ý là:
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 nút hành động nổi chung, hãy sử dụng
Thành phần kết hợp FloatingActionButton
. Ví dụ sau 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, với việc thêm các màu sắc 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 đáng kể so với các ví dụ khác
ngoài việc thực tế là
dẫn đến nút lớn hơn.
Sau đây là cách triển khai đơn giản một 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
và FloatingActionButton
là dịch vụ này dành riêng icon
và text
tham số. Loại quảng cáo này cho phép bạn tạo một nút có nội dung phức tạp hơn và có thể mở rộng
sao 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 truyề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: