Theo dõi khả năng hiển thị trong Compose

Việc theo dõi thời điểm một phần tử trên giao diện người dùng xuất hiện trên màn hình rất hữu ích cho nhiều trường hợp sử dụng, chẳng hạn như ghi nhật ký số liệu phân tích, quản lý trạng thái giao diện người dùng và tối ưu hoá tài nguyên bằng cách tự động phát hoặc tạm dừng nội dung video. Compose cung cấp một số đối tượng sửa đổi để theo dõi chế độ hiển thị của phần tử trên giao diện người dùng, chẳng hạn như:

• onVisibilityChanged – Đối tượng sửa đổi này sẽ thông báo cho bạn khi khả năng hiển thị của một thành phần kết hợp thay đổi. Đây là lựa chọn lý tưởng để kích hoạt một thao tác hoặc hiệu ứng phụ mỗi khi thành phần kết hợp trở nên hiển thị.
• onLayoutRectChanged – Đối tượng sửa đổi này cung cấp thông tin về ranh giới của một thành phần kết hợp so với gốc, cửa sổ và màn hình. API này cung cấp chế độ kiểm soát cấp thấp và là API nền tảng cho onVisibilityChanged. Đối tượng sửa đổi này tương tự như onGloballyPositioned, nhưng mang lại hiệu suất tốt hơn và tăng tính linh hoạt.

Bạn có thể sử dụng các API này với mọi thành phần kết hợp trong chuỗi đối tượng sửa đổi.

Theo dõi các thay đổi về chế độ hiển thị bằng onVisibilityChanged

Việc nắm được thời điểm một mục xuất hiện hoặc xuất hiện một phần với người dùng có thể giúp bạn theo dõi số liệu phân tích (ví dụ: số người xem), tối ưu hoá hiệu suất (chỉ tìm nạp hoặc tìm nạp trước dữ liệu từ mạng khi mục đó xuất hiện) hoặc thậm chí kích hoạt các sự kiện (phát hoặc tạm dừng video).

Để nhận được thông báo khi chế độ hiển thị của một mục thay đổi, hãy sử dụng đối tượng sửa đổi onVisibilityChanged, như minh hoạ trong ví dụ sau:

Text(
    text = "Some text",
    modifier = Modifier
        .onVisibilityChanged { visible ->
            if (visible) {
                // Do something if visible
            } else {
                // Do something if not visible
            }
        }
        .padding(vertical = 8.dp)
)
VisibilitySnippets.kt

Đối tượng sửa đổi onVisibilityChanged cung cấp một giá trị boolean phản ánh trạng thái hiển thị hiện tại của thành phần kết hợp. Ngoài ra, nó còn cung cấp các tham số như minFraction và minDurationMs, giúp bạn kiểm soát chính xác hơn thời điểm cần kích hoạt lệnh gọi lại về khả năng hiển thị.

Giống như mọi đối tượng sửa đổi khác, việc sắp xếp theo trình tự rất quan trọng đối với đối tượng sửa đổi onVisibilityChanged. Ví dụ trước cho thấy một hàm có khả năng kết hợp hiển thị văn bản có khoảng đệm. Để đảm bảo rằng đối tượng sửa đổi ảnh hưởng đến toàn bộ thành phần kết hợp cùng với khoảng đệm, hãy thêm đối tượng sửa đổi onVisibilityChanged trước đối tượng sửa đổi padding.

Đặt giới hạn thời gian cho một thành phần kết hợp trước khi kích hoạt lệnh gọi lại chế độ hiển thị

Trong một số trường hợp, bạn có thể chỉ muốn kích hoạt một thao tác sau khi người dùng nhìn thấy một mục trong một khoảng thời gian nhất định. Ví dụ: bạn có thể tự động phát một video nếu video đó đã hiển thị cho người dùng trong một khoảng thời gian.

Để kích hoạt một thao tác sau khi một mục hiển thị trong một khoảng thời gian xác định, hãy dùng tham số minDurationMs trong thành phần sửa đổi onVisibilityChanged. Tham số này chỉ định khoảng thời gian tối thiểu mà một thành phần kết hợp cần hiển thị liên tục để lệnh gọi lại được kích hoạt. Nếu thành phần kết hợp ngừng hiển thị trước khi hết thời lượng, bộ tính giờ sẽ được đặt lại. Giá trị mặc định là 0 mili giây.

Đoạn mã sau đây sẽ thay đổi nền thành màu tím sau khi thành phần kết hợp hiển thị cho người dùng trong 3 giây:

var background by remember { mutableStateOf(PalePink) }
Card(
    modifier = modifier
        // ...
        .onVisibilityChanged(minDurationMs = 3000) {
            if (it) {
                background = MutedPlum
            }
        }
) {

    Box(
        modifier = Modifier
            // ...
            .background(background),
        contentAlignment = Alignment.Center,
    ) {
        // ...
    }
}
VisibilitySnippets.kt

Đặt một phần hiển thị tối thiểu

Việc đặt một phần hiển thị tối thiểu cho lệnh gọi lại khả năng hiển thị của thành phần kết hợp sẽ hữu ích khi làm việc với nội dung có thể cuộn (ví dụ: LazyColumn) để tối ưu hoá việc tìm nạp dữ liệu cho các mục vượt quá kích thước màn hình.

Trong những trường hợp như vậy, hãy dùng tham số minFractionVisible trong đối tượng sửa đổi onVisibilityChanged để xác định phần cần có trên màn hình để thành phần kết hợp được đánh dấu là hiển thị. Tham số này hỗ trợ các giá trị dấu phẩy động trong khoảng từ 0.0f đến 1.0f và được đặt thành 1.0f theo mặc định. 1.0f có nghĩa là thành phần kết hợp cần xuất hiện hoàn toàn trên màn hình để lệnh gọi lại được kích hoạt.

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here the visible callback gets triggered when 20% of the composable is visible
                .onVisibilityChanged(
                    minFractionVisible = 0.2f,
                ) { visible ->
                    if (visible) {
                        // Call specific logic here
                        // viewModel.fetchDataFromNetwork()
                    }
                }
                .padding(vertical = 16.dp)
        ) {
            Text(
                text = "Sample Text",
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }
    }
}
VisibilitySnippets.kt

Ví dụ được dùng trước đó sẽ tải trước Androidify Bots từ mạng trước khi thành phần kết hợp hiển thị hoàn toàn. Trong Hình 2, bot thứ ba không tải vì thành phần kết hợp không hiển thị hoàn toàn. Trong Hình 3, minFractionVisible được đặt và bot thứ ba tải trước khi hiển thị hoàn toàn trên màn hình.