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 thành phần dùng chung, có một số trường hợp sử dụng cụ thể có các đề xuất riêng.

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

Thông thường, bạn nên 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. Để tính năng này 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 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 khớp nhau. Phần tử được chia sẻ mới sẽ sử dụng bộ nhớ đệm của phần tử 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() với resizeMode = SharedTransitionScope.ResizeMode.scaleToBounds(). Quá trình chuyển đổi này giúp việc thay đổi kích thước diễn ra tương đối mượt mà. 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 tạo ảnh động. Thay vào đó, hãy sử dụng Modifier.wrapContentSize() hoặc Modifier.wrapContentWidth() thay vì dùng TextAlign khác nhau cho các hiệu ứng chuyển đổi được chia sẻ.