حالات الاستخدام الشائعة للعناصر المشتركة

عند تحريك العناصر المشترَكة، هناك بعض حالات الاستخدام المحدّدة التي تتضمّن توصيات خاصة.

الصور غير المتزامنة

من الشائع استخدام مكتبة لتحميل صورة بشكل غير متزامن، مثلاً عند استخدام عنصر AsyncImage القابل للإنشاء في Coil. ولكي تعمل بسلاسة بين عنصرَين قابلَين للإنشاء، يُنصح بضبط 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 مختلف للانتقالات المشتركة.

السابق
تخصيص
التالي
مع ميزة التنقّل