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

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

ฟังก์ชันที่เขียนด้วย Compose สำหรับจัดการระยะขอบ

รายการต่อไปนี้คือรายการMaterial Components ที่ จัดการระยะขอบโดยอัตโนมัติ

แถบแอป

• TopAppBar / SmallTopAppBar / 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 ของระบบและรอยบากของจอแสดงผล หลีกเลี่ยงการใช้แนวทางการจัดการ Inset เพิ่มเติม เช่น ไม้บรรทัด ตัวปรับแต่ง Padding หรือตัวปรับแต่งขนาด Inset หากใช้ Scaffold เพื่อหลีกเลี่ยงการใช้ Padding มากเกินไปกับ UI

ลบล้างระยะขอบเริ่มต้น

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

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

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