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

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

Composable สำหรับการจัดการ Inset

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

แถบแอป

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

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

• 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 พารามิเตอร์นี้อาจเป็นประเภทการแทรกหน้าต่างอื่นเพื่อใช้แทน หรือปิดใช้โดยส่งอินสแตนซ์ว่างเปล่าได้ WindowInsets(0, 0, 0, 0)

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

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