Nút hành động nổi

Nút hành động nổi (FAB) là một 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. API này thúc đẩy một thao tác đơn lẻ, tập trung, là đường dẫn phổ biến nhất mà người dùng có thể thực hiện và thường nằm ở phía dưới cùng bên phải 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 tạo một ghi chú mới.
• Thêm người liên hệ mới: Trong ứng dụng nhắn tin, FAB có thể mở một giao diện cho phép người dùng thêm ai đó 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 đồ vào 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 phù hợp với Material Design, nhưng tham số của các nút này 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 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.")
    }
}
FloatingActionButton.kt

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, kèm theo 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.")
    }
}
FloatingActionButton.kt

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 một FAB lớn.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

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 hàm này và FloatingActionButton là có các tham số icon và text riêng. Các thành phần 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ể thay đổi tỷ lệ để vừa 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") },
    )
}
FloatingActionButton.kt

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

Tài nguyên khác

• Các nút phổ biến
• Tài liệu về giao diện người dùng Material