ใช้ส่วนแทรกของ Material 3

เพื่อความสะดวกในการใช้งาน คอมโพสิเบิล Material 3 ในตัวจำนวนมาก (androidx.compose.material3) จะจัดการส่วนแทรกด้วยตนเอง โดยอิงตามวิธีวางคอมโพสิเบิลในแอปตามข้อกำหนดของ Material

หมายเหตุ: คอมโพเนนต์ Material 2 (androidx.compose.material) จะไม่จัดการส่วนแทรกโดยอัตโนมัติ อย่างไรก็ตาม คุณสามารถเข้าถึงส่วนแทรกและนำไปใช้ด้วยตนเองได้ ใน androidx.compose.material 1.6.0 และเวอร์ชันที่ใหม่กว่า ให้ใช้พารามิเตอร์ windowInsets เพื่อใช้ส่วนแทรกด้วยตนเองสำหรับ BottomAppBar, TopAppBar, BottomNavigation และ NavigationRail ในทำนองเดียวกัน ให้ใช้พารามิเตอร์ contentWindowInsets สำหรับ Scaffold ไม่เช่นนั้น ให้ใช้ส่วนแทรกเป็นระยะห่างจากขอบด้วยตนเอง

คอมโพสิเบิลการจัดการส่วนแทรก

ต่อไปนี้คือรายการคอมโพเนนต์ Material ที่จัดการส่วนแทรกโดยอัตโนมัติ

แถบแอป

• TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: ใช้ด้านบนและด้านแนวนอนของแถบระบบเป็นระยะห่างจากขอบ เนื่องจากใช้ที่ด้านบนของหน้าต่าง
• BottomAppBar: ใช้ด้านล่างและด้านแนวนอนของแถบระบบเป็นระยะห่างจากขอบ

คอนเทนเนอร์เนื้อหา

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (เนื้อหาภายในลิ้นชักการนำทางโมดัล): ใช้ส่วนแทรกแนวตั้งและเริ่มต้นกับเนื้อหา
• ModalBottomSheet: ใช้ส่วนที่เว้นไว้ด้านล่าง
• NavigationBar: ใช้ส่วนที่เว้นไว้ด้านล่างและแนวนอน
• NavigationRail: ใช้ส่วนแทรกแนวตั้งและเริ่มต้น

Scaffold

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

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}
InsetsSnippets.kt

วิดีโอต่อไปนี้แสดง LazyColumn ภายใน Scaffold ที่ปิดใช้และเปิดใช้การแสดงผลแบบไร้ขอบ

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

ลบล้างส่วนแทรกเริ่มต้น

คุณสามารถเปลี่ยนพารามิเตอร์ windowInsets ที่ส่งไปยัง Composable เพื่อกำหนดค่าลักษณะการทำงานของ Composable ได้ พารามิเตอร์นี้อาจเป็น Window Inset ประเภทอื่นที่จะใช้แทน หรือปิดใช้โดยส่งอินสแตนซ์ที่ว่างเปล่า: WindowInsets(0, 0, 0, 0)

ตัวอย่างเช่น หากต้องการปิดใช้การจัดการส่วนแทรกใน LargeTopAppBar ให้ตั้งค่าพารามิเตอร์ windowInsets เป็นอินสแตนซ์ว่างเปล่า ดังนี้

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt