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

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

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

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

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