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

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

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

รายการต่อไปนี้คือรายการคอมโพเนนต์ 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