תרחישים לדוגמה נפוצים לשימוש ברכיבים משותפים

כשמנפישים רכיבים משותפים, יש כמה תרחישי שימוש ספציפיים שבהם יש המלצות ספציפיות.

תמונות אסינכרוניות

מקובל להשתמש בספרייה כדי לטעון תמונה באופן אסינכרוני, למשל כשמשתמשים ב-Coil's AsyncImage composable. כדי שהמעבר בין שני רכיבים שניתנים להרכבה יהיה חלק, מומלץ להגדיר את placeholderMemoryCacheKey() ואת memoryCacheKey() לאותו מפתח כמחרוזת שנגזרת ממפתח האלמנט המשותף, כך שמפתח המטמון יהיה זהה לאלמנטים המשותפים התואמים. האלמנט החדש ששותף ישתמש במטמון של ההתאמה שלו כ-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
        )
)

טקסט

כדי להנפיש שינויים ב-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()
        )
)

כברירת מחדל, השינויים ב-TextAlign לא מונפשים. במקום זאת, אפשר להשתמש ב-Modifier.wrapContentSize() או ב-Modifier.wrapContentWidth() במקום ב-TextAlign שונה למעברים משותפים.

הקודם
התאמה אישית
הבא
עם ניווט