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

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 lên 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 trơn tru 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á như một chuỗi bắt nguồn từ khoá phần tử dùng chung, sao cho khoá bộ nhớ đệm giống nhau đối với các phần tử dùng chung đã so khớp. Phần tử được chia sẻ mới sẽ sử dụng bộ nhớ đệm của kết quả trùng 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 của 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 làm cho sự thay đổi về kích thước 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 của TextAlign không được tạo ảnh động. Thay vào đó, hãy sử dụng Modifier.wrapContentSize() / Modifier.wrapContentWidth() thay vì sử dụng TextAlign khác cho các hiệu ứng chuyển đổi được chia sẻ.