วันนี้ 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

การดำเนินการโครูทีนในการทดสอบ

เราขอแนะนำการอัปเดตครั้งสำคัญเกี่ยวกับวิธีที่ 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
        }
    }
}

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

เราได้ปรับปรุงการรองรับ Compose สำหรับแทร็กแพด เช่น แทร็กแพดในตัวของแล็ปท็อป แทร็กแพดที่ติดกับแท็บเล็ต หรือแทร็กแพดภายนอก/เสมือน ตอนนี้โดยทั่วไปแล้ว เหตุการณ์แทร็กแพดพื้นฐานจะถือเป็นเหตุการณ์ 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()
    }
}

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

@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 

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

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