กรณีการใช้งานองค์ประกอบที่ใช้ร่วมกันทั่วไป

เมื่อทำให้องค์ประกอบที่แชร์เคลื่อนไหว มีกรณีการใช้งานบางอย่าง คำแนะนำที่เฉพาะเจาะจง

รูปภาพแบบอะซิงโครนัส

ปกติแล้วการใช้ไลบรารีเพื่อโหลดรูปภาพแบบอะซิงโครนัส เช่น โดยใช้ Composable ของ AsyncImage ของ Cold เราขอแนะนำให้ตั้งค่า 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 สำหรับการเปลี่ยนร่วมกัน