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

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

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

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

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