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

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

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

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

טקסט

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

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