موارد استفاده رایج از عنصر مشترک

هنگام پویانمایی عناصر مشترک، برخی‌از موارد استفاده خاص وجود دارد که توصیه‌های ویژه‌ای دارند.

تصاویر ناهمگام

استفاده از کتابخانه برای بار کردن ناهمزمان تصویر رایج است، مثلاً هنگام استفاده از ترکیب‌پذیر Coil's AsyncImage. برای اینکه این ویژگی بین دو عنصر ترکیبی به‌طور یکپارچه کار کند، توصیه می‌شود placeholderMemoryCacheKey() و memoryCacheKey() را روی همان کلید به‌عنوان رشته‌ای برگرفته از کلید عنصر مشترک تنظیم کنید، به‌طوری که کلید حافظه نهان برای عناصر مشترک منطبق یکسان باشد. عنصر مشترک جدید تا زمانی که تصویر جدید را بار کند، از حافظه نهان مطابقت خود به‌عنوان جای‌بان استفاده خواهد کرد.

استفاده معمول برای 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

نوشتار

برای پویانمایی fontSize تغییر، از Modifier.sharedBounds()،‏ resizeMode = ScaleToBounds() استفاده کنید. این انتقال باعث می‌شود تغییر اندازه نسبتاً روان باشد. پارامتر contentScale را می‌توان برای پویانمایی سبک یا وزن قلم خاصی تغییر داد.

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

TextAlign تغییر به‌طور پیش‌فرض پویانمایی نمی‌شود. درعوض، از Modifier.wrapContentSize() یا Modifier.wrapContentWidth() به‌جای استفاده از TextAlign متفاوت برای گذارهای مشترک استفاده کنید.