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 cụ thể.

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

Thường thì người dùng nên sử dụng thư viện để tải hình ảnh lên một cách không đồng bộ, chẳng hạn như khi bằng cách 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 thuộc tính placeholderMemoryCacheKey() và memoryCacheKey() đến cùng một khoá với 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 cho phù hợp với các phần tử được chia sẻ. 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 trình giữ chỗ cho đến khi tải hình ảnh mới.

Dưới đây là cách sử dụng thông thường cho AsyncImage:

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(). Hiệu ứng chuyển đổi này làm tăng quy mô thay đổi tương đối linh hoạt. Bạn có thể điều chỉnh tham số contentScale để tạo ảnh động 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

Các thay đổi về TextAlign không được tạo ảnh động theo mặc định. Thay vào đó Modifier.wrapContentSize() / Modifier.wrapContentWidth() vượt quá bằng cách sử dụng TextAlign để dùng chung hiệu ứng chuyển đổi.