Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

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

ปรับแต่ง

พร้อมระบบนำทาง