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

Nút hành động nổi (FAB) là một nút nhấn mạnh 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 thúc đẩy một hành động duy nhất, 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 được tìm thấy ở góc dưới cùng bên phải màn hình.

Hãy xem xét 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 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 đồ theo vị trí hiện tại của người dùng.

Trong Material Design, có 4 loại FAB:

  • FAB: Nút hành động nổi có kích thước thông thường.
  • FAB nhỏ: 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: Nút hành động nổi chứa nhiều nội dung hơn là chỉ một biểu tượng.
Ví dụ về từng thành phần trong số 4 thành phần nút hành động nổi.
Hình 1. Bốn loại nút hành động nổi.

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 nút hành động nổi nhất quán với Material Design, nhưng các tham số của chúng không khác nhau nhiều. Sau đây là một số tham số chính mà bạn cần lưu ý:

  • onClick: Hàm được gọi khi người dùng nhấn vào 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 composable FloatingActionButton cơ bản. Ví dụ sau đây minh hoạ cách triển khai cơ bản của một FAB:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Floating action button.")
    }
}

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

Một nút hành động nổi tiêu chuẩn có các góc bo tròn, bóng đổ và biểu tượng "thêm".
Hình 2. Nút hành động nổi.

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 đây minh hoạ cách thực hiện việc này, cùng với việc bổ sung màu sắc tuỳ chỉnh.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Small floating action button.")
    }
}

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

Cách triển khai SmallFloatingActionButton chứa biểu tượng "thêm".
Hình 3. Nút hành động nổi nhỏ.

Nút lớn

Để tạo nút hành động nổi lớn, hãy sử dụng thành phần kết hợp LargeFloatingActionButton. Composable 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 một FAB lớn.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Large floating action button")
    }
}

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

Một cách triển khai LargeFloatingActionButton chứa biểu tượng "thêm".
Hình 4. Nút hành động nổi lớn.

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à hàm này có các tham số icon và text chuyên biệt. 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, có thể điều chỉnh 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ị ví dụ được truyền cho icon và text.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(painter = rememberVectorPainter(AppIcons.Edit), "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}

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

Một cách triển khai ExtendedFloatingActionButton cho thấy văn bản có nội dung "extended button" (nút mở rộng) và biểu tượng chỉnh sửa.
Hình 5. Nút hành động nổi có cả văn bản và biểu tượng.

Tài nguyên khác