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

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

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

Composables สำหรับการจัดการส่วนที่เว้นไว้

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

แถบแอป

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

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

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

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

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