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

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

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

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

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