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

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

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

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

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