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 hiển thị 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ý 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 khả năng 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 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. Đối tượng này cung cấp khả năng 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ính linh hoạt cao hơn.

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

Theo dõi các thay đổi về khả năng 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 cho 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 suất (tìm nạp hoặc tìm nạp trước dữ liệu từ mạng chỉ khi mục đó hiển thị) hoặc thậm chí kích hoạt các sự kiện (phát hoặc tạm dừng video).

Để được thông báo khi khả năng 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, đối tượng này 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 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 composable 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 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 một mục hiển thị cho người dùng trong một khoảng thời gian nhất định. Ví dụ: bạn có thể tự động phá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 hành động sau khi một mục hiển thị 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 thành phần kết hợp cần hiển thị liên tục để kích hoạt lệnh gọi lại. Nếu thành phần kết hợp ngừng hiển thị trước khi đạt đến khoảng thời gian, thì bộ hẹn 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 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 phân số hiển thị tối thiểu

Việc đặt phân số 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 bạn 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 số cần hiển thị trên màn hình để đánh dấu thành phần kết hợp 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 là 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 để kích hoạt lệnh gọi lại.

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 sử 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.