תרחישים לדוגמה נפוצים לשימוש ברכיבים משותפים
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
כשמנפישים רכיבים משותפים, יש כמה תרחישי שימוש ספציפיים שבהם יש המלצות ספציפיות.
תמונות אסינכרוניות
מקובל להשתמש בספרייה כדי לטעון תמונה באופן אסינכרוני, למשל כשמשתמשים ב-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
)
)
טקסט
כדי להנפיש שינויים ב-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
שונים למעברים משותפים.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-08-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-08-27 (שעון UTC)."],[],[],null,["When animating shared elements, there are some particular use cases that have\nspecific recommendations.\n\nAsynchronous images\n\nIt's common to use a library to load up an image asynchronously, such as when\nusing [Coil's `AsyncImage` composable](https://coil-kt.github.io/coil/compose/).\nFor it to work seamlessly between two composables, its recommended to set the\n`placeholderMemoryCacheKey()` and `memoryCacheKey()` to the same key as a string\nderived from the shared element key, such that the cache key is the same for the\nmatched shared elements. The new shared element will be using its match's cache\nas the placeholder until it loads the new image.\n\nThe typical usage for `AsyncImage` is as follows:\n\n\n```kotlin\nAsyncImage(\n model = ImageRequest.Builder(LocalContext.current)\n .data(\"your-image-url\")\n .crossfade(true)\n .placeholderMemoryCacheKey(\"image-key\") // same key as shared element key\n .memoryCacheKey(\"image-key\") // same key as shared element key\n .build(),\n placeholder = null,\n contentDescription = null,\n modifier = Modifier\n .size(120.dp)\n .sharedBounds(\n rememberSharedContentState(\n key = \"image-key\"\n ),\n animatedVisibilityScope = this\n )\n)https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement/SharedElementCommonUseCaseSnippets.kt#L47-L64\n```\n\n\u003cbr /\u003e\n\nText\n\nTo animate `fontSize` changes, use `Modifier.sharedBounds()`, `resizeMode =\nScaleToBounds()`. This transition makes the size\nchange relatively fluid. The `contentScale` parameter can be tweaked to animate\na specific font weight or style.\n\n\n```kotlin\nText(\n text = \"This is an example of how to share text\",\n modifier = Modifier\n .wrapContentWidth()\n .sharedBounds(\n rememberSharedContentState(\n key = \"shared Text\"\n ),\n animatedVisibilityScope = this,\n enter = fadeIn(),\n exit = fadeOut(),\n resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()\n )\n)https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement/SharedElementCommonUseCaseSnippets.kt#L84-L97\n```\n\n\u003cbr /\u003e\n\n`TextAlign` changes are **not** animated by default. Instead, use\n`Modifier.wrapContentSize()` or `Modifier.wrapContentWidth()` over using different\n`TextAlign` for shared transitions."]]