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

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

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

בדרך כלל משתמשים בספרייה כדי לטעון תמונה באופן אסינכרוני, למשל כשמשתמשים ב-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 שונים למעברים משותפים.

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