Các trường hợp sử dụng thành phần dùng chung phổ biến

Khi tạo ảnh động cho các phần tử được chia sẻ, có một số trường hợp sử dụng cụ thể có các đề xuất cụ thể.

Hình ảnh không đồng bộ

Thông thường, bạn sẽ sử dụng thư viện để tải hình ảnh không đồng bộ, chẳng hạn như khi sử dụng thành phần kết hợp AsyncImage của Coil. Để hoạt động liền mạch giữa hai thành phần kết hợp, bạn nên đặt placeholderMemoryCacheKey() và memoryCacheKey() thành cùng một khoá dưới dạng một chuỗi bắt nguồn từ khoá phần tử dùng chung, sao cho khoá bộ nhớ đệm giống với các phần tử dùng chung được so khớp. Phần tử dùng chung mới sẽ sử dụng bộ nhớ đệm của kết quả khớp làm phần giữ chỗ cho đến khi tải hình ảnh mới.

Cách sử dụng thông thường cho AsyncImage như sau:

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("your-image-url")
        .crossfade(true)
        .placeholderMemoryCacheKey("image-key") //  same key as shared element key
        .memoryCacheKey("image-key") // same key as shared element key
        .build(),
    placeholder = null,
    contentDescription = null,
    modifier = Modifier
        .size(120.dp)
        .sharedBounds(
            rememberSharedContentState(
                key = "image-key"
            ),
            animatedVisibilityScope = this
        )
)
SharedElementCommonUseCaseSnippets.kt

Văn bản

Để tạo ảnh động cho các thay đổi về fontSize, hãy sử dụng Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Quá trình chuyển đổi này giúp kích thước thay đổi tương đối linh hoạt. Bạn có thể điều chỉnh tham số contentScale để tạo ảnh động cho một kiểu hoặc độ đậm phông chữ cụ thể.

Text(
    text = "This is an example of how to share text",
    modifier = Modifier
        .wrapContentWidth()
        .sharedBounds(
            rememberSharedContentState(
                key = "shared Text"
            ),
            animatedVisibilityScope = this,
            enter = fadeIn(),
            exit = fadeOut(),
            resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()
        )
)
SharedElementCommonUseCaseSnippets.kt

Theo mặc định, các thay đổi về TextAlign không có ảnh động. Thay vào đó, hãy sử dụng Modifier.wrapContentSize() / Modifier.wrapContentWidth() thay vì sử dụng nhiều TextAlign cho các hiệu ứng chuyển đổi dùng chung.