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

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

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

استفاده از کتابخانه برای بارگذاری ناهمزمان یک تصویر، مانند زمانی که از Coil's AsyncImage composable استفاده می شود، معمول است. برای اینکه آن را به طور یکپارچه بین دو کامپوزیشن کار کند، توصیه می‌شود که 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 مختلف برای انتقال های مشترک استفاده کنید.

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

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

استفاده از کتابخانه برای بارگذاری ناهمزمان یک تصویر، مانند زمانی که از Coil's AsyncImage composable استفاده می شود، معمول است. برای اینکه آن را به طور یکپارچه بین دو کامپوزیشن کار کند، توصیه می‌شود که 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 مختلف برای انتقال های مشترک استفاده کنید.