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 sẽ 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 hành động hoặc tác dụng phụ mỗi khi thành phần kết hợp xuất hiện.
• 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 quyền 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 bất kỳ composable nào trong chuỗi modifier.

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

Việc hiểu rõ thời điểm một mục hiển thị hoặc hiển thị một phần đối 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ố lượt xem), tối ưu hoá hiệu quả (chỉ tìm nạp hoặc tìm nạp trước dữ liệu từ mạng khi mục hiển thị) hoặc thậm chí là kích hoạt sự kiện (phát hoặc tạm dừng video).

Để nhận 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ư 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 composable. Ngoài ra, API này còn cung cấp các tham số như minFraction và minDurationMs, giúp bạn kiểm soát chặt chẽ hơn thời điểm cần kích hoạt lệnh gọi lại chế độ hiển thị.

Giống như mọi đối tượng sửa đổi khác, 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 composable hiển thị văn bản có khoảng đệm. Để đảm bảo modifier ảnh hưởng đến toàn bộ composable cùng với khoảng đệm, hãy thêm modifier onVisibilityChanged trước modifier padding.

Đặt giới hạn thời gian cho một composable trước khi kích hoạt lệnh gọi lại khả năng hiển thị

Trong một số trường hợp, bạn có thể chỉ muốn kích hoạt một hành động 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 video nếu người dùng đã xem video đó một thời gian.

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

Đoạn mã sau đây thay đổi nền thành màu tím sau khi người dùng nhìn thấy thành phần kết hợp 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

Hình 1. Nền thay đổi từ màu hồng sang màu mận sau khi thành phần kết hợp xuất hiện trên màn hình trong 3 giây liên tục.

Đặt tỷ lệ hiển thị tối thiểu

Việc đặt tỷ lệ hiển thị tối thiểu cho lệnh gọi lại chế độ 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 sử 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ị. Thuộc tính này hỗ trợ các giá trị thực 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 hiển thị 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

Hình 2. Không đặt minFractionVisible.	Hình 3. Với minFractionVisible được đặt là 0.2f.

Ví dụ được sử dụng trước đó 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ì composable 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.

Lưu ý: Các video trước đó đã được làm chậm một cách có chủ đích để dễ nhìn hơn.