ใช้ส่วนแทรกของ 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 ไม่เช่นนั้น ให้ใช้ระยะขอบด้วยตนเองเป็นระยะเว้น

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 โดยปิดและเปิดใช้การแสดงผลแบบขอบจรดขอบ

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

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

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

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