วันนี้ Jetpack Compose เวอร์ชันเดือนเมษายน 2026 พร้อมให้ใช้งานอย่างเสถียรแล้ว รุ่นนี้มีโมดูลหลักของ Compose เวอร์ชัน 1.11 (ดูการจับคู่ BOM แบบเต็ม), เครื่องมือแก้ไขข้อบกพร่องขององค์ประกอบที่ใช้ร่วมกัน, เหตุการณ์แทร็กแพด และอื่นๆ นอกจากนี้ เรายังมี API เวอร์ชันทดลอง 2-3 รายการที่อยากให้คุณลองใช้และแสดงความคิดเห็น

หากต้องการใช้รุ่นที่เปิดตัวในวันนี้ ให้อัปเกรดเวอร์ชัน Compose BOM เป็นเวอร์ชันต่อไปนี้

implementation(platform("androidx.compose:compose-bom:2026.04.01"))

การเปลี่ยนแปลงใน Compose 1.11.0

การดำเนินการ Coroutine ในการทดสอบ

เราขอแนะนำการอัปเดตครั้งสำคัญเกี่ยวกับวิธีที่ Compose จัดการเวลาในการทดสอบ หลังจากช่วงการเลือกเข้าร่วมที่ประกาศไว้ใน Compose 1.10 ตอนนี้ API การทดสอบ v2 เป็นค่าเริ่มต้นแล้ว และ API v1 ได้รับการเลิกใช้งานแล้ว การเปลี่ยนแปลงที่สำคัญคือการเปลี่ยนตัวจัดสรรการทดสอบเริ่มต้น ในขณะที่ API v1 อาศัย UnconfinedTestDispatcher ซึ่งเรียกใช้โครูทีนทันที แต่ API v2 ใช้ StandardTestDispatcher ซึ่งหมายความว่าเมื่อมีการเปิดใช้โครูทีนในการทดสอบ ระบบจะจัดคิวโครูทีนดังกล่าวและจะไม่ดำเนินการจนกว่าจะมีการเลื่อนเวลาเสมือน

ซึ่งจะจำลองสภาพแวดล้อมการใช้งานจริงได้ดีขึ้น ทำให้ตรวจพบ Race Condition ได้อย่างมีประสิทธิภาพ และทำให้ชุดโปรแกรมทดสอบมีความแข็งแกร่งมากขึ้นและมีความผันผวนน้อยลงอย่างเห็นได้ชัด

เราขอแนะนำอย่างยิ่งให้ย้ายข้อมูลชุดโปรแกรมทดสอบเพื่อให้แน่ใจว่าการทดสอบสอดคล้องกับลักษณะการทำงานของโครูทีนมาตรฐานและหลีกเลี่ยงปัญหาความเข้ากันได้ในอนาคต โปรดดูคู่มือการย้ายข้อมูลแบบครอบคลุมสำหรับการแมป API และการแก้ไขที่พบบ่อย

การปรับปรุงองค์ประกอบที่ใช้ร่วมกันและเครื่องมือภาพเคลื่อนไหว

นอกจากนี้ เรายังได้เพิ่มเครื่องมือแก้ไขข้อบกพร่องด้วยภาพที่มีประโยชน์สำหรับองค์ประกอบที่แชร์และ Modifier.animatedBounds ตอนนี้คุณจะเห็นสิ่งที่เกิดขึ้นเบื้องหลังได้อย่างชัดเจน เช่น ขอบเขตเป้าหมาย เส้นทางการเคลื่อนไหว และจำนวนการจับคู่ที่พบ ซึ่งทำให้ทราบได้ง่ายขึ้นว่าเหตุใดการเปลี่ยนฉากจึงอาจไม่ทำงานตามที่คาดไว้ หากต้องการใช้เครื่องมือใหม่ เพียงครอบ LookaheadAnimationVisualDebugging Composable ด้วย SharedTransitionLayout 

LookaheadAnimationVisualDebugging(
    overlayColor = Color(0x4AE91E63),
    isEnabled = true,
    multipleMatchesColor = Color.Green,
    isShowKeylabelEnabled = false,
    unmatchedElementColor = Color.Red,
) {
    SharedTransitionLayout {
        CompositionLocalProvider(
            LocalSharedTransitionScope provides this,
        ) {
            // your content
        }
    }
}

เหตุการณ์ของแทร็กแพด

เราได้ปรับปรุงการรองรับการเขียนสำหรับแทร็กแพด เช่น แทร็กแพดในตัวของแล็ปท็อป แทร็กแพดที่ติดกับแท็บเล็ต หรือแทร็กแพดภายนอก/เสมือน ตอนนี้โดยทั่วไปแล้ว ระบบจะถือว่าเหตุการณ์แทร็กแพดพื้นฐานเป็นเหตุการณ์ PointerType.Mouse ซึ่งจะปรับพฤติกรรมของเมาส์และแทร็กแพดให้ตรงกับความคาดหวังของผู้ใช้มากขึ้น ก่อนหน้านี้ ระบบจะตีความเหตุการณ์แทร็กแพดเหล่านี้เป็นนิ้วสัมผัสหน้าจอปลอมของ PointerType.Touch ซึ่งทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สับสน เช่น การคลิกและลากด้วยแทร็กแพดจะเลื่อนแทนการเลือก การเปลี่ยนประเภทเคอร์เซอร์ที่เหตุการณ์เหล่านี้มีในการเปิดตัว Compose เวอร์ชันล่าสุดจะทำให้การคลิกและลากด้วยแทร็กแพดไม่เลื่อนอีกต่อไป

นอกจากนี้ เรายังเพิ่มการรองรับท่าทางสัมผัสบนแทร็กแพดที่ซับซ้อนมากขึ้นตามที่แพลตฟอร์มรับรู้ตั้งแต่ API 34 เป็นต้นมา ซึ่งรวมถึงการปัดด้วย 2 นิ้วและการบีบนิ้ว คอมโพเนนต์ต่างๆ เช่น Modifier.scrollable และ Modifier.transformable จะจดจำท่าทางสัมผัสเหล่านี้โดยอัตโนมัติเพื่อให้ทำงานกับแทร็กแพดได้ดียิ่งขึ้น

การเปลี่ยนแปลงเหล่านี้ช่วยปรับปรุงลักษณะการทำงานของแทร็กแพดในคอมโพเนนต์ในตัว โดยจะนำการเลื่อนด้วยการสัมผัสที่ซ้ำซ้อนออก มีท่าทางสัมผัสเริ่มต้นแบบลากและวางที่ใช้งานง่ายขึ้น การเลือกด้วยการดับเบิลคลิกและทริปเปิลคลิกในช่องข้อความ และเมนูบริบทสไตล์เดสก์ท็อปในช่องข้อความ

หากต้องการทดสอบลักษณะการทำงานของแทร็กแพด มี API การทดสอบใหม่พร้อม performTrackpadInput, ซึ่งช่วยให้ตรวจสอบลักษณะการทำงานของแอปเมื่อใช้กับแทร็กแพดได้ หากมีเครื่องตรวจจับท่าทางสัมผัสที่กำหนดเอง ให้ตรวจสอบลักษณะการทำงานในอินพุตประเภทต่างๆ ซึ่งรวมถึงหน้าจอสัมผัส เมาส์ แทร็กแพด และสไตลัส และตรวจสอบว่ารองรับวงล้อเลื่อนของเมาส์และท่าทางสัมผัสของแทร็กแพด

ค่าเริ่มต้นของโฮสต์การเขียน (รันไทม์ของ Compose)

เราได้เปิดตัว HostDefaultProvider, LocalHostDefaultProvider, HostDefaultKey และ ViewTreeHostDefaultKey เพื่อให้บริการระดับโฮสต์โดยตรงผ่าน compose-runtime ซึ่งจะช่วยให้ไลบรารีไม่ต้องขึ้นอยู่กับ compose-ui ในการค้นหา และรองรับ Kotlin Multiplatform ได้ดียิ่งขึ้น หากต้องการลิงก์ค่าเหล่านี้กับแผนผังการจัดองค์ประกอบ ผู้เขียนไลบรารีสามารถใช้ compositionLocalWithHostDefaultOf เพื่อสร้าง CompositionLocal ที่แก้ปัญหาค่าเริ่มต้นจากโฮสต์ได้

แสดงตัวอย่าง Wrapper

ตัวอย่างที่กำหนดเองของ Android Studio เป็นฟีเจอร์ใหม่ที่ช่วยให้คุณกำหนดวิธีแสดงเนื้อหาของตัวอย่าง Compose ได้อย่างแม่นยำ

การใช้PreviewWrapperProviderอินเทอร์เฟซและการใช้คำอธิบายประกอบ@PreviewWrapperใหม่ช่วยให้คุณแทรกลอจิกที่กำหนดเองได้อย่างง่ายดาย เช่น การใช้Themeที่เฉพาะเจาะจง โดยสามารถใช้คำอธิบายประกอบกับฟังก์ชันที่มีคำอธิบายประกอบด้วย @Composable และ @Preview หรือ @MultiPreview ซึ่งเป็นโซลูชันทั่วไปที่ใช้งานง่ายซึ่งใช้ได้กับฟีเจอร์เวอร์ชันตัวอย่างและช่วยลดโค้ดที่ซ้ำกันได้อย่างมาก

class ThemeWrapper: PreviewWrapper {
    @Composable
    override fun Wrap(content: @Composable (() -> Unit)) {
        JetsnackTheme {
            content()
        }
    }
}

@PreviewWrapperProvider(ThemeWrapper::class)
@Preview
@Composable
private fun ButtonPreview() {
    // JetsnackTheme in effect
    Button(onClick = {}) {
        Text(text = "Demo")
    }
}

การเลิกใช้งานและการนำออก

• ตามที่ประกาศไว้ในบล็อกโพสต์ Compose 1.10 เราจะเลิกใช้งาน Modifier.onFirstVisible() ชื่อของฟีเจอร์นี้มักทำให้เกิดความเข้าใจผิด โดยเฉพาะในเลย์เอาต์แบบเลซี่ ซึ่งจะทริกเกอร์หลายครั้งในระหว่างการเลื่อน เราขอแนะนำให้ย้ายข้อมูลไปยัง Modifier.onVisibilityChanged() ซึ่งช่วยให้ติดตามสถานะระดับการมองเห็นด้วยตนเองได้อย่างแม่นยำยิ่งขึ้น โดยปรับให้เหมาะกับข้อกำหนดของ Use Case ที่เฉพาะเจาะจง
• เราได้นำแฟล็ก ComposeFoundationFlags.isTextFieldDpadNavigationEnabled ออกแล้วเนื่องจากตอนนี้ระบบจะเปิดใช้การไปยังส่วนต่างๆ ด้วย D-pad สำหรับ TextFields โดยค่าเริ่มต้นเสมอ ลักษณะการทำงานใหม่นี้ช่วยให้มั่นใจได้ว่าเหตุการณ์ D-pad จากเกมแพดหรือรีโมตทีวีจะเลื่อนเคอร์เซอร์ไปในทิศทางที่กำหนดก่อน โฟกัสจะย้ายไปยังองค์ประกอบอื่นได้ก็ต่อเมื่อเคอร์เซอร์ไปถึงจุดสิ้นสุดของข้อความ

API ที่กำลังจะเปิดตัว

ใน Compose เวอร์ชัน 1.12.0 ที่กำลังจะเปิดตัว เราจะอัปเกรด compileSdk เป็น compileSdk 37 โดย AGP 9 และแอปและไลบรารีทั้งหมดที่ขึ้นอยู่กับ Compose จะรับช่วงข้อกำหนดนี้ เราขอแนะนำให้คุณอัปเดตเวอร์ชันล่าสุดที่เผยแพร่ เนื่องจาก Compose มุ่งมั่นที่จะใช้ compileSdks ใหม่ๆ อย่างรวดเร็วเพื่อให้คุณเข้าถึงฟีเจอร์ล่าสุดของ Android ได้ อย่าลืมดูเอกสารประกอบที่นี่เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ AGP เวอร์ชันที่รองรับสำหรับ API ระดับต่างๆ 

ใน Compose 1.11.0 เราได้เปิดตัว API ต่อไปนี้เป็น @Experimental และหวังว่าจะได้รับฟังความคิดเห็นของคุณขณะที่คุณสำรวจ API เหล่านี้ในแอป โปรดทราบว่า @Experimental APIs มีไว้สำหรับการประเมินและรับความคิดเห็นในช่วงแรก และอาจมีการเปลี่ยนแปลงหรือนำออกอย่างมีนัยสำคัญในรุ่นต่อๆ ไป

รูปแบบ (เวอร์ชันทดลอง)

เราขอแนะนำ API พื้นฐานแบบทดลองใหม่สำหรับการจัดรูปแบบ Style API เป็นกระบวนทัศน์ใหม่สำหรับการปรับแต่งองค์ประกอบภาพของคอมโพเนนต์ ซึ่งเดิมมักใช้ตัวแก้ไข โดยออกแบบมาเพื่อปลดล็อกการปรับแต่งที่ง่ายและลึกซึ้งยิ่งขึ้นด้วยการเปิดเผยชุดพร็อพเพอร์ตี้ที่จัดรูปแบบได้มาตรฐานพร้อมการจัดรูปแบบตามสถานะอย่างง่ายและการเปลี่ยนภาพเคลื่อนไหว API ใหม่นี้ช่วยให้เราเห็นประโยชน์ด้านประสิทธิภาพที่น่าพอใจอยู่แล้ว เราวางแผนที่จะใช้สไตล์ในคอมโพเนนต์ Material เมื่อ API สไตล์เสถียรแล้ว

ตัวอย่างพื้นฐานของการลบล้างพื้นหลังสไตล์สถานะที่กดมีดังนี้

@Composable
fun LoginButton(modifier: Modifier = Modifier) {
    Button(
        onClick = {
            // Login logic
        },
        modifier = modifier,
        style = {
            background(
                Brush.linearGradient(
                    listOf(lightPurple, lightBlue)
                )
            )
            width(75.dp)
            height(50.dp)
            textAlign(TextAlign.Center)
            externalPadding(16.dp)

            pressed {
                background(
                    Brush.linearGradient(
                        listOf(Color.Magenta, Color.Red)
                    )
                )
            }
        }
    ){
        Text(
            text = "Login",
        )
    }
}

ดูเอกสารประกอบและรายงานข้อบกพร่องได้ที่นี่

MediaQuery (ทดลอง)

API mediaQuery ใหม่นี้เป็นวิธีประกาศและมีประสิทธิภาพในการปรับ UI ให้เข้ากับสภาพแวดล้อม โดยจะแปลงการดึงข้อมูลที่ซับซ้อนให้เป็นเงื่อนไขง่ายๆ ภายใน UiMediaScope เพื่อให้มั่นใจว่าการจัดองค์ประกอบใหม่จะเกิดขึ้นเมื่อจำเป็นเท่านั้น

การรองรับสัญญาณด้านสิ่งแวดล้อมที่หลากหลาย ตั้งแต่ความสามารถของอุปกรณ์ เช่น ประเภทแป้นพิมพ์และความแม่นยำของเคอร์เซอร์ ไปจนถึงสถานะตามบริบท เช่น ขนาดหน้าต่างและท่าทาง จะช่วยให้คุณสร้างประสบการณ์ที่ตอบสนองได้อย่างลึกซึ้ง derivedMediaQuery มีประสิทธิภาพในตัวเพื่อจัดการการอัปเดตที่มีความถี่สูง ในขณะที่ความสามารถในการลบล้างขอบเขตทำให้การทดสอบและการแสดงตัวอย่างเป็นไปอย่างราบรื่นในการกำหนดค่าฮาร์ดแวร์ ก่อนหน้านี้ หากต้องการเข้าถึงพร็อพเพอร์ตี้บางอย่างของอุปกรณ์ เช่น หากอุปกรณ์อยู่ในโหมดตั้งโต๊ะ คุณจะต้องเขียนโค้ดที่ต้องเขียนซ้ำจำนวนมากเพื่อทำเช่นนั้น 

@Composable
fun isTabletopPosture(
    context: Context = LocalContext.current
): Boolean {
    val windowLayoutInfo by
        WindowInfoTracker
            .getOrCreate(context)
            .windowLayoutInfo(context)
            .collectAsStateWithLifecycle(null)

    return windowLayoutInfo.displayFeatures.any { displayFeature ->
        displayFeature is FoldingFeature &&
            displayFeature.state == FoldingFeature.State.HALF_OPENED &&
            displayFeature.orientation == FoldingFeature.Orientation.HORIZONTAL
    }
}

@Composable
fun VideoPlayer() {
    if(isTabletopPosture()) {
        TabletopLayout()
    } else {
        FlatLayout()
    }
}

ตอนนี้คุณสามารถใช้ UIMediaQuery เพื่อเพิ่มไวยากรณ์ mediaQuery เพื่อค้นหาพร็อพเพอร์ตี้ของอุปกรณ์ เช่น หากอุปกรณ์อยู่ในโหมดตั้งโต๊ะ

@OptIn(ExperimentalMediaQueryApi::class)
@Composable
fun VideoPlayer() {
    if (mediaQuery { windowPosture == UiMediaScope.Posture.Tabletop }) {
        TabletopLayout()
    } else {
        FlatLayout()
    }
}

ดูเอกสารประกอบและรายงานข้อบกพร่องได้ที่นี่

ตารางกริด (ทดลอง)

Grid เป็น API ใหม่ที่มีประสิทธิภาพสำหรับการสร้างเลย์เอาต์แบบ 2 มิติที่ซับซ้อนใน Jetpack Compose แม้ว่า Row และ Column จะเหมาะสำหรับการออกแบบเชิงเส้น แต่ Grid จะช่วยให้คุณควบคุมโครงสร้างที่จำเป็นสำหรับสถาปัตยกรรมระดับหน้าจอและคอมโพเนนต์ที่ซับซ้อนได้โดยไม่ต้องมีค่าใช้จ่ายของรายการที่เลื่อนได้ Grid ช่วยให้คุณกำหนดเลย์เอาต์โดยใช้แทร็ก ช่องว่าง และเซลล์ พร้อมตัวเลือกการกำหนดขนาดที่คุ้นเคย เช่น Dp เปอร์เซ็นต์ ขนาดเนื้อหาโดยธรรมชาติ และหน่วย "Fr" แบบยืดหยุ่น 

@OptIn(ExperimentalGridApi::class)
@Composable
fun GridExample() {
    Grid(
        config = {
            repeat(4) { column(0.25f) }
            repeat(2) { row(0.5f) }
            gap(16.dp)
        }
    ) {
        Card1(modifier = Modifier.gridItem(rowSpan = 2)
        Card2(modifier = Modifier.gridItem(colmnSpan = 3)
        Card3(modifier = Modifier.gridItem(columnSpan = 2)
        Card4()
    }
}

คุณวางรายการได้โดยอัตโนมัติหรือวางให้ครอบคลุมหลายแถวและคอลัมน์อย่างชัดเจนเพื่อความแม่นยำ ที่สำคัญที่สุดคือมีความสามารถในการปรับตัวสูง คุณสามารถกำหนดค่าแทร็กและช่วงของกริดใหม่แบบไดนามิกเพื่อตอบสนองต่อสถานะของอุปกรณ์ เช่น โหมดตั้งโต๊ะหรือการเปลี่ยนการวางแนว เพื่อให้มั่นใจว่า UI จะดูดีในทุกรูปแบบ

ดูเอกสารประกอบและรายงานข้อบกพร่องได้ที่นี่ 

FlexBox (ทดลอง)

FlexBox คือคอนเทนเนอร์เลย์เอาต์ที่ออกแบบมาเพื่อ UI ที่มีประสิทธิภาพสูงและปรับเปลี่ยนได้ โดยจะจัดการการกำหนดขนาดสินค้าและการกระจายพื้นที่ตามขนาดคอนเทนเนอร์ที่มี  จัดการงานที่ซับซ้อน เช่น การตัดข้อความ (wrap) และการจัดแนวหลายแกนของรายการ (justifyContent, alignItems, alignContent) ช่วยให้รายการขยาย (grow) หรือย่อ (shrink) เพื่อเติมเต็มคอนเทนเนอร์ได้ 

@OptIn(ExperimentalFlexBoxApi::class)
fun FlexBoxWrapping(){
    FlexBox(
        config = {
            wrap(FlexWrap.Wrap)
            gap(8.dp)
        }
    ) {
        RedRoundedBox()
        BlueRoundedBox()
        GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow(1.0f) })
        OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.7f) })
        PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.3f) })
    }
}

ดูเอกสารประกอบและรายงานข้อบกพร่องได้ที่นี่

การติดตั้งใช้งาน SlotTable ใหม่ (ทดลอง)

เราได้เปิดตัวการติดตั้งใช้งาน SlotTable ใหม่ ซึ่งจะปิดใช้โดยค่าเริ่มต้นในรุ่นนี้ SlotTable คือโครงสร้างข้อมูลภายในที่รันไทม์ของ Compose ใช้เพื่อติดตามสถานะของลำดับชั้นการจัดองค์ประกอบ ติดตามการลบล้าง/การจัดองค์ประกอบใหม่ จัดเก็บค่าที่จดจำไว้ และติดตามข้อมูลเมตาทั้งหมดของการจัดองค์ประกอบที่รันไทม์ การติดตั้งใช้งานใหม่นี้ออกแบบมาเพื่อปรับปรุงประสิทธิภาพ โดยเฉพาะอย่างยิ่งการแก้ไขแบบสุ่ม

หากต้องการลองใช้ SlotTable ใหม่ ให้เปิดใช้ ComposeRuntimeFlags.isLinkBufferComposerEnabled 

เริ่มเขียนโค้ดได้เลยวันนี้

เมื่อมี API ใหม่ๆ ที่น่าสนใจมากมายใน Jetpack Compose และอีกมากมายที่กำลังจะเปิดตัว จึงเป็นโอกาสอันดีที่จะย้ายข้อมูลไปยัง Jetpack Compose  และเช่นเคย เราให้ความสำคัญกับความคิดเห็นและคำขอฟีเจอร์ของคุณ (โดยเฉพาะเกี่ยวกับ@Experimentalฟีเจอร์ที่ยังอยู่ระหว่างการพัฒนา) โปรดส่งความคิดเห็นและคำขอที่นี่ ขอให้สนุกกับการเขียน