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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

การจัดการคอมโพเนนต์ที่ประกอบกันได้ในอินเซ็ต

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

แถบแอป

• TopAppBar / SmallTopAppBar / 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 ที่เปิดและปิดใช้การแสดงผลแบบเต็มหน้าจอ

ลบล้างส่วนตัดเริ่มต้น

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

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

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